Javascript 复选框绑定/取消绑定逻辑

嗨，我遇到了这样一种情况：包含复选框的表的绑定在标题复选框处完成

i、 e当您选择标题时，检查是否选中了所有表行

但是由于这个原因，当我从表中取消选择一行时，问题就出现了，标题复选框应该取消选择，这是没有发生的

假设我取消选中header复选框，由于绑定问题，整个表行都将被取消选中

请提出一些逻辑来解决这个问题

我尝试检索表行复选框值并再次呈现它，但这是内存限制

提前感谢

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;
        }
    });
}

var headCheckbox=document.getElementById（'header'）；
var subCheckbox=document.getElementsByClassName（'sub'）；
headCheckbox.addEventListener（'change'，函数（e）{
对于（变量i=0；i

---

您可以按以下方式进行
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;
     }
}  

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

函数selectAll（源代码）
{
var复选框=document.getElementsByName（'foo'）；
对于（var i=0，n=checkboxes.length；iim使用javascript开发i t请发布您的代码。逻辑如下：在单行复选框上单击listener，生成一段代码，检查行是否未选中。如果至少有一行未选中，则在这种情况下，标题复选框也必须取消选中。您可以甚至在单击时循环所有行，并测试是否所有行都已选中，在这种情况下，将head复选框设置为“checked”状态。但此逻辑的问题是，如果取消选择header chekbox，则绑定在header复选框上。如果取消选择header chekbox，则将取消选择整个表行。当所有表行都被选中了…啊，好的。现在它被选中了；-）谢谢alexP您的解决方案可以工作，但我需要更改我的整个绑定：(