Javascript 如何让不确定复选框触发其他复选框的功能？

我制作了一个表，其中包含显示和隐藏行的复选框，以便于比较特定行。我想添加不确定的复选框，以便可以同时选择或不选择多行。它的工作原理是检查它下面的框，但不启动隐藏或显示行的函数，即使它是选中的。不过，各个复选框仍会触发该功能

使用复选框显示/隐藏行

$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");

if( ischecked ){
    $('.' + valu).show();
}else{
    $('.' + valu).hide();
}
});

第1部分的不确定复选框

$(document).ready(function () {
var checkboxes = document.querySelectorAll('input.div1'),
checkdiv1 = document.getElementById('checkdiv1');

for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.div1:checked').length;

    checkdiv1.checked = checkedCount > 0;
    checkdiv1.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}

checkdiv1.onclick = function() {
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
}
}
});

$（文档）.ready（函数（）{
var复选框=document.querySelectorAll（'input.div1'），
checkdiv1=document.getElementById（'checkdiv1'）；
对于（VarI=0；I0；
checkdiv1.indeterminate=checkedCount>0&&checkedCount
$('input[type = checkbox].show').change(function () {

而不是

$('input[type = checkbox]').change(function () {

2） 您可以删除第二个$（document）.ready（）函数并将代码合并为一个

$(document).ready(function(){ fun1() });
$(document).ready(function(){ fun2() });

相当于

$(document).ready(function(){ fun1(); fun2(); });

3） 单击外部复选框时，可以触发内部复选框的“更改”事件：

$(checkboxes[i]).trigger('change');


$（'input[type=checkbox].show'）。更改（函数（）{
var valu=$（this.val（）；
var ischecked=$（this）.is（“：checked”）；
如果（已检查）{
$（'.+valu）.show（）；
}否则{
$（'.+value）.hide（）；
}
});
$（文档）.ready（函数（）{
var复选框=document.querySelectorAll（'input.div1'）；
var checkdiv1=document.getElementById（'checkdiv1'）；
对于（VarI=0；I0；
checkdiv1.indeterminate=checkedCount>0&&checkedCount对于（var i=0；i您可以在您的更改处理程序中完成所有这些。您必须稍微重新考虑标记，但这非常简单。我将
数据目标
和
数据节点
添加到父复选框中，将
d
和
r
类添加到表行中

HTML

<div>
    <label><input type="checkbox" data-target="d" data-nodes=".div1" checked>Division 1</label>
    <label><input type="checkbox" class="div1 show" value="d1" checked>Team 1</label>
    <label><input type="checkbox" class="div1 show" value="d2" checked>Team 2</label>
    <label><input type="checkbox" class="div1 show" value="d3" checked>Team 3</label>
</div>
<div>
    <label><input type="checkbox" data-target="r" data-nodes=".div2"  checked>Division 2</label>
    <label><input type="checkbox" class="div2 show" value="r1" checked>Team 1</label>
    <label><input type="checkbox" class="div2 show" value="r2" checked>Team 2</label>
    <label><input type="checkbox" class="div2 show" value="r3" checked>Team 3</label>
</div>
<br>
<hr>
<br>
<table border="1">
    <tbody>
        <tr>
            <td>Teams</td>
            <td>Points For</td>
            <td>Points Against</td>
        </tr>
        <tr class="d d1">
            <td>Division 1 Team 1</td>
            <td>280</td>
            <td>100</td>
        </tr>
        <tr class="d d2">
            <td>Division 1 Team 2</td>
            <td>225</td>
            <td>150</td>
        </tr>
        <tr class="d d3">
            <td>Division 1 Team 3</td>
            <td>187</td>
            <td>223</td>
        </tr>
        <tr class="r r1">
            <td>Division 2 Team 1</td>
            <td>330</td>
            <td>185</td>
        </tr>
        <tr class="r r2">
            <td>Division 2 Team 2</td>
            <td>267</td>
            <td>225</td>
        </tr>
        <tr class="r r3">
            <td>Division 2 Team 3</td>
            <td>223</td>
            <td>150</td>
        </tr>
    </tbody>
</table>

查看此提琴：
如果我们的一个答案对您有所帮助，请选择其中一个作为答案。谢谢Chitrang，我想知道您是否可以再帮我一件事。我想在每行的第一列中添加一个按钮，除了取消选中顶部相应的复选框之外，还可以隐藏该特定行。更新了answer添加按钮。
<div>
    <label><input type="checkbox" data-target="d" data-nodes=".div1" checked>Division 1</label>
    <label><input type="checkbox" class="div1 show" value="d1" checked>Team 1</label>
    <label><input type="checkbox" class="div1 show" value="d2" checked>Team 2</label>
    <label><input type="checkbox" class="div1 show" value="d3" checked>Team 3</label>
</div>
<div>
    <label><input type="checkbox" data-target="r" data-nodes=".div2"  checked>Division 2</label>
    <label><input type="checkbox" class="div2 show" value="r1" checked>Team 1</label>
    <label><input type="checkbox" class="div2 show" value="r2" checked>Team 2</label>
    <label><input type="checkbox" class="div2 show" value="r3" checked>Team 3</label>
</div>
<br>
<hr>
<br>
<table border="1">
    <tbody>
        <tr>
            <td>Teams</td>
            <td>Points For</td>
            <td>Points Against</td>
        </tr>
        <tr class="d d1">
            <td>Division 1 Team 1</td>
            <td>280</td>
            <td>100</td>
        </tr>
        <tr class="d d2">
            <td>Division 1 Team 2</td>
            <td>225</td>
            <td>150</td>
        </tr>
        <tr class="d d3">
            <td>Division 1 Team 3</td>
            <td>187</td>
            <td>223</td>
        </tr>
        <tr class="r r1">
            <td>Division 2 Team 1</td>
            <td>330</td>
            <td>185</td>
        </tr>
        <tr class="r r2">
            <td>Division 2 Team 2</td>
            <td>267</td>
            <td>225</td>
        </tr>
        <tr class="r r3">
            <td>Division 2 Team 3</td>
            <td>223</td>
            <td>150</td>
        </tr>
    </tbody>
</table>

$('input[type = checkbox]').change(function () {
    var nodes = $(this).data("nodes");
    var target = $(this).data("target");
    var valu = $(this).val();
    var ischecked = $(this).is(":checked");

    // If the nodes data attribute exists, use its value
    if (target) {
        valu = target;
    }

    if (ischecked) {
        $('.' + valu).show();
        $(nodes).prop('checked', true);
    } else {
        $('.' + valu).hide();
        $(nodes).prop('checked', false);
    }
});