Question

我的表格包含数百行，其中一些有class="include"，有些有class="exclude"。我的Javascript成功勾选了表格中的所有框。但是，我实际上只想选择tr class='include'

中的框

这是我的HTML：

<tr class='include'><td><input class='checkboxplay' type='checkbox' name='checkbox[]' value='myvalue'></td></tr>

<tr class='exclude'><td><input class='checkboxplay' type='checkbox' name='checkbox[]' value='myvalue'></td></tr>

这是我的Javascript：（选择所有框）

var items = document.getElementsByClassName('checkboxplay');
      for(var i=0; i<items.length; i++){
        if(items[i].type=='checkbox')
          items[i].checked=true;
      }

我认为这样的东西可以按class="include"进行过滤，但它根本不起作用。也就是说，它不会勾选任何方框。有什么建议吗？

var items = document.getElementsByClassName('include').getElementsByClassName('checkboxplay');
      for(var i=0; i<items.length; i++){
        if(items[i].type=='checkbox')
          items[i].checked=true;
      }

Answer 1

将document.querySelectorAll()与descendant combinator（＆＃39; .include .checkboxplay＆＃39;）一起使用，以选择.include所有具有班级.checkboxplay的孩子：< / p>

＆＃13;

var includeCheckbox = document.querySelectorAll('.include .checkboxplay');

// just for demo - will add a red outline arround the selected checkbox
includeCheckbox.forEach((el) => el.style.outline = '1px solid red');

＆＃13;

<table>
  <tr class='include'>
    <td><input class='checkboxplay' type='checkbox' name='checkbox[]' value='myvalue'></td>
  </tr>

  <tr class='exclude'>
    <td><input class='checkboxplay' type='checkbox' name='checkbox[]' value='myvalue'></td>
  </tr>
</table>

＆＃13;

Answer 2

记住javascript选择器和CSS一样。因此，您在css中定位.include .checkboxplay样式。因此，对于javascript，document.querySelectorAll(".include .checkboxplay")

按类获取元素，按父类过滤

2 个答案: