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

Question

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

jsfiddle

用复选框显示/隐藏行

$('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;
}
}
});

第 2 部分的不确定复选框

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

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

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

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

Answer 1

1) 您需要根据内部复选框添加隐藏/显示行，因此您可以将“更改”事件处理程序绑定(bind)到类为“显示”的复选框。所以，你的代码将是

$('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) 单击外部复选框时，可以触发内部复选框的 'change' 事件:

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

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

$(document).ready(function () {
  	var checkboxes = document.querySelectorAll('input.div1');
    var 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() {
        var checkboxes = document.querySelectorAll('input.div1');
        for(var i=0; i<checkboxes.length; i++) {
            checkboxes[i].checked = this.checked;        
            $(checkboxes[i]).trigger('change');
        }
    }

  	var checkboxes = document.querySelectorAll('input.div2');
    var checkdiv2 = document.getElementById('checkdiv2');

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

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

    checkdiv2.onclick = function() {
        var checkboxes = document.querySelectorAll('input.div2');
        for(var i=0; i<checkboxes.length; i++) {
            checkboxes[i].checked = this.checked;
            $(checkboxes[i]).trigger('change');
        }
    }
    
    $('.hideRow').click(function () {
        $('input[value="' + $(this).attr('checkBoxValue') + '"]').trigger('click');
    });
});

.hide{
    visibility: hidden;
}

label {
    display:block
}

label:first-child {
    font-weight:bold;
}

label:nth-child(n+2) {
    margin-left:1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
	<label><input type="checkbox" id="checkdiv1" 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" id="checkdiv2" 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></td>
            <td >Teams</td>
            <td>Points For</td>
            <td>Points Against</td>
        </tr>
        <tr class="d1">
            <td><button class="hideRow" checkBoxValue="d1">Hide</button></td>
            <td>Division 1 Team 1</td>
            <td>280</td>
            <td>100</td>
        </tr>
        <tr class="d2">
            <td><button class="hideRow" checkBoxValue="d2">Hide</button></td>
            <td>Division 1 Team 2</td>
            <td>225</td>
            <td>150</td>
        </tr>
        <tr class="d3">
            <td><button class="hideRow" checkBoxValue="d3">Hide</button></td>
            <td>Division 1 Team 3</td>
            <td>187</td>
            <td>223</td>
        </tr>
        <tr class="r1">
            <td><button class="hideRow" checkBoxValue="r1">Hide</button></td>
            <td>Division 2 Team 1</td>
            <td>330</td>
            <td>185</td>
        </tr>
        <tr class="r2">
            <td><button class="hideRow" checkBoxValue="r2">Hide</button></td>
            <td>Division 2 Team 2</td>
            <td>267</td>
            <td>225</td>
        </tr>
        <tr class="r3">
            <td><button class="hideRow" checkBoxValue="r3">Hide</button></td>
            <td>Division 2 Team 3</td>
            <td>223</td>
            <td>150</td>
        </tr>
    </tbody>
</table>