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

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 ('.include .checkboxplay') 选择具有 .checkboxplay 类的 .include 的所有子级:

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');

<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>