复选框绑定/取消绑定逻辑答案

【问题标题】：Checkbox bind/unbind logic复选框绑定/取消绑定逻辑
【发布时间】：2014-01-28 07:02:13
【问题描述】：

您好，我有一种情况，包含复选框的表格的绑定是在标题复选框处完成的

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

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

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

请提出一些逻辑来解决它

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

提前致谢

【问题讨论】：

我使用javascript开发它
请发布您的代码。
好吧，逻辑应该是这样的：在您的单行复选框单击侦听器上有一段代码检查该行是否未被选中。如果至少有一行被取消选中，那么在这种情况下，标题复选框也必须取消选中。您甚至可以在单击时循环遍历所有行并测试是否所有行都已被选中，在这种情况下，将 head 复选框设置为“已选中”状态。
但是这个逻辑的问题是如果我取消选择标题复选框，我的绑定在标题复选框上，整个表格行将被取消选择

标签： javascript html css checkbox

【解决方案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>

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

【讨论】：

当所有表格行被选中时，上面的代码没有选中标题复选框...
啊，好的。现在可以了 ;-)
感谢 alexP，您的解决方案有效，但我需要更改我的整个绑定 :(

【解决方案2】：

你可以像下面这样
1.选中标题复选框上的所有复选框。
2. UnSelect header checkbox on unselecting any child checkbox.
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/>

【讨论】：