Question

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

使用复选框显示/隐藏行

$('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）您需要根据内部复选框添加隐藏/显示行，这样您就可以绑定＆＃39;更改＆＃39;使用class＆＃34; show＆＃34;复选框的事件处理程序。所以，你的代码将是

double interest_in_cents = round(
    Monthly_payment(0.07/12 /* percent */, N_payments, principal_in_cents));

而不是

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

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

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

相当于

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

3）您可以触发＆＃39;更改＆＃39;单击外部复选框时内部复选框的事件：

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

＆＃13;

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

＆＃13;

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

＆＃13;

.hide{
    visibility: hidden;
}

label {
    display:block
}

label:first-child {
    font-weight:bold;
}

label:nth-child(n+2) {
    margin-left:1em;
}

＆＃13;

Answer 2

您可以在更改处理程序中执行所有这些操作。您必须在很小程度上重新考虑您的标记，但这很简单。我将body { -webkit-animation-name: raiseBody; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 0.7s; } @keyframes raiseBody { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, -300px); }和data-target添加到父复选框，将data-nodes和d类添加到表格行。

<强> HTML

<强>的jQuery

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

看到这个小提琴：Instead

如何获取Indeterminate Checkbox来触发其他复选框的功能？

2 个答案: