按课堂获取元素，按父级过滤

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

与后代组合器('.include .checkboxplay'(一起使用document.querySelectorAll()，以选择具有.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>

Answer 2

请记住，JavaScript选择器与CSS相同。因此，您以.include .checkboxplay为目标用于CSS。因此，对于JavaScript，其document.querySelectorAll(".include .checkboxplay")