如何使不确定复选框触发其他复选框的功能
How to get Indeterminate Checkbox to fire function of other checkboxes?
我制作了一个表，其中有显示和隐藏行的复选框，以便更容易比较特定的行。我想添加不确定的复选框，以便可以同时选择或不选择多行。它会勾选它下面的方框，但不会触发隐藏或显示行的功能，即使勾选了。单个复选框仍然会触发该函数。
jsfiddle
用复选框显示/隐藏行
$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");
if( ischecked ){
$('.' + valu).show();
}else{
$('.' + valu).hide();
}
});
Indeterminate除法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;
}
}
});
Indeterminate除法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;
}
}
});
1)你需要添加隐藏/显示基于内部复选框的行，所以你可以绑定'change'事件处理程序与类"show"复选框。你的代码应该是
$('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>您可以在更改处理程序中完成所有这些操作。您将不得不重新考虑您的标记在一个小的程度，但这是相当简单的。我将data-target和data-nodes添加到父复选框中，并将d和r类添加到表行中。