Question

我有一种情况，包含复选框的表的绑定是在标题复选框

完成的

，当你选择标题时，检查所有表行都被选中。

但是由于这个问题，当我从表中取消选择一个行时，标题chekcbox应该被取消选择，这不会发生

并假设我取消选中标题复选框整个表格行将被取消选中，因为绑定问题

请提出一些解决问题的逻辑

我尝试检索表格行复选框值并再次渲染它，但这是一个内存约束。

提前致谢

Answer 1

<强> HTML

<input type="checkbox" id="header" />
<li>
    <input type="checkbox" class="sub" />
</li>
<li>
    <input type="checkbox" class="sub" />
</li>
<li>
    <input type="checkbox" class="sub" />
</li>

<强> JS

var headCheckbox = document.getElementById('header');
var subCheckbox = document.getElementsByClassName('sub');

headCheckbox.addEventListener('change', function (e) {
    for (var i = 0; i < subCheckbox.length; i++) {
        subCheckbox[i].checked = (this.checked ?  true : false);
    }
});

for (var i = 0; i < subCheckbox.length; i++) {
    subCheckbox[i].addEventListener('change', function (e) {
        if (!this.checked) {
            headCheckbox.checked = false;
        } else {
            var checked = 0;
            for (var i = 0; i < subCheckbox.length; i++) {
                if (subCheckbox[i].checked) checked++;
            }
            if (checked == subCheckbox.length) headCheckbox.checked = true;
        }
    });
}

DEMO

Answer 2

您可能会在下面做到 1.选择标题复选框上的全部复选框 2.取消选中任何子复选框时取消选中标题复选框 3.选择所有子复选框时选择标题复选框。

JavaScript：

function selectAll(source) 
{
    var checkboxes = document.getElementsByName('foo');
    for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;
    }
}  

function selectChk(src)
{
    var isAllChecked = true;
    var headerChk = document.getElementsByName('headerChk');
    if(!src.checked){
        headerChk[0].checked = false;
    }
    else{
        var checkboxes = document.getElementsByName('foo');
         for(var i=0, n=checkboxes.length;i<n;i++) {
               if(!checkboxes[i].checked)
                    isAllChecked = false;
               }
          if(isAllChecked)
             headerChk[0].checked = true;
     }
}

HTML：

<input type="checkbox" onClick="selectAll(this)" name="headerChk" /> Select All<br/>

<input type="checkbox" name="foo" value="bar1" onClick="selectChk(this)"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2" onClick="selectChk(this)"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3" onClick="selectChk(this)"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4" onClick="selectChk(this)"> Bar 4<br/>

复选框绑定/解除绑定逻辑

2 个答案: