Question

我正在使用CSS模板并尝试绘制具有以下结构的表：

<tbody>
    <tr role="row" class="odd">
    <td>
    <div class="checkbox">
       <input type="checkbox" id="checkbox1" value="check">
       <label for="checkbox1"></label>
    </div>
    </td>
    <td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
    </tr>
    <tr class="unread even" role="row">
    <td>
    <div class="checkbox">
      <input type="checkbox" id="checkbox0" value="check">
      <label for="checkbox0"></label>
    </div></td>
    <td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td>
    </tr>
</tbody>

输入类型复选框使用CSS :: before和:: after之后使用以下设置：

[type=checkbox]:checked,[type=checkbox]:not(:checked){...
[type=checkbox]+label:before,[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(:checked):disabled+label:before{...
[type=checkbox].tabbed:focus+label:after{...
[type=checkbox]:checked+label:before{...
[type=checkbox]:checked:disabled+label:before{...

我想在Javascript中以编程方式选择所有复选框，不知道我该怎么办？

Answer 1

I would like to select all checkbox programmatically in Javascript

如果您想要选中所有复选框，请检查＆＃39; ，为此您可以使用：

＆＃13;

let cbox = document.querySelectorAll("input[type='checkbox']");
for (var i=0; i<cbox.length; i++) {
    cbox[i].checked = true;
 }

＆＃13;

<input type="checkbox" class="c1">
<input type="checkbox" class="c2">
<input type="checkbox" class="c3">

＆＃13;

但是，如果您想使用javascript选择:before或:after元素，则不能。它们是pseudo-elements，就像他们的名字所说的那样，它们不是实际的元素，它们不被视为DOM的一部分，因此它们无法被触摸，选择＆＃39;，＆＃39;操作＆＃39;等等通过javascript或jquery等。

以编程方式检查所有复选框（使用CSS3 :: before和:: after）

1 个答案: