Question

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

1）我有10个孩子复选框并有主复选框。当我选中主复选框时，我可以选择所有子复选框。如果用户取消选中任何子复选框，我可以取消选中 main checkbox.so这里有10个子复选框，我取消选中1个复选框，基于此未经检查的主复选框。

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

Answer 1

将onclick处理程序添加到复选框。
保持计数。
如果选中则添加1，如果未选中则减去1。
如果总数等于复选框的数量，请选中全部选中复选框。

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

使用javascript复选框状态

2 个答案: