javascript - jquery 通过操作检查和取消选中所有内容

Question

当用户单击此按钮时，我有更多的复选框输入调用函数“boxclick”:

<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">

为了检查/取消选中所有内容，我使用简单的 jquery 脚本:

<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">

我的问题是当我选中/取消选中所有功能“boxclick”时不运行。

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
  }

Answer 1

我认为你可以做到:

HTML

<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">

jQuery

如果您想选中/取消选中所有复选框:

var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
   checkboxes.prop('checked', this.checked);
});

如果您想一次选择任意一个:

var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
   checkboxes.prop('checked', false);
   this.checked = !this.checked;
});​

DEMO