带有 javascript 的复选框状态答案

【问题标题】：Checkbox state with javascript带有 javascript 的复选框状态
【发布时间】：2012-04-03 02:47:16
【问题描述】：

我的 jsp 页面中有复选框列表。基于主复选框，我必须选中/取消选中所有子复选框。

1) 假设我有 10 个子复选框和主复选框。当我选中主复选框时，我可以选择所有子复选框。如果用户取消选择任何子复选框，我可以取消选择主复选框。所以这里有 10 个子复选框，我取消选择 1 个复选框，基于此我未选中主复选框。

但是这里我的问题是，如果用户再次选中该复选框，那么这里我的状态被选中了所有 10 个复选框。所以我什至应该检查主复选框。

【问题讨论】：

我认为你应该弄清楚页面的所有逻辑在你尝试弄清楚如何用 JavaScript 完成这一切之前。（也许你已经想通了，但不是很清楚，而且这听起来像是一个很奇怪的交互设置。复选框是干什么用的？）
@Pointy- 嗯？当所有内容都被选中时，复选框会被选中，这并不奇怪。

标签： javascript

【解决方案1】：

将 onclick 处理程序添加到复选框。
数一数。
如果选中则加 1，如果未选中则减一。
如果总数等于复选框的数量，请选中选中所有复选框。

【讨论】：

【解决方案2】：

这里有一个粗略的指导：

<script type="text/javascript">

var checkboxCheck = (function() {
  var boxes;
  var mainCb;

  // If all checkboxes checked, return true
  function allChecked() {
    var i = boxes.length;
    while (i--) {
      if (!boxes[i].checked) return false;
    }
    return true;
  }

  // If value is in array, return true
  function oneOf(value, array) {
    var i = array.length;
    while(i--) {
      if (array[i] == value) return true;
    }
    return false;
  }

  // Main function
  return function(evt, el) {

    // Get the element that was clicked on
    var target = evt.target || evt.srcElement;

    // Initialise boxes if not done already
    if (!boxes) {
      boxes = [];
      var o = el.getElementsByTagName('input');

      for (var i=o.length; --i;) {

        if (o[i].type == 'checkbox') {
          boxes.push(o[i]);
        }
      }
    }

    // Initialise mainCb if not done already
    if (!mainCb) {
      mainCb = document.getElementById('mainCb');
    }

    // If the click was on one of the checkboxes
    if (oneOf(target, boxes)) {

        // If they're all checked, check mainCb
        // otherwise uncheck mainCb
        mainCb.checked = allChecked(boxes);

    // If the click was on mainCb      
    } else if (target == mainCb) {

      // Set all checkboxes to same state as mainCb
      for (var j=boxes.length; j--;) {
        boxes[j].checked = mainCb.checked;
      }
    }
  }
}())
</script>

<fieldset onclick="checkboxCheck(event, this)">
<label for="main">Check all<input type="checkbox" id="mainCb" value="0"></label>
<br>
<label for="cb0">0<input type="checkbox" id="cb0" value="0"></label>
<br>
<label for="cb1">1<input type="checkbox" id="cb1" value="1"></label>
<br>
<label for="cb2">2<input type="checkbox" id="cb2" value="2"></label>
</fieldset>

【讨论】：