HTML

onClick

的jQuery

<input type="checkbox" name="fool1" id="fool1"> 
<input type="checkbox" name="fool2" id="fool2">

 <a href="#" class="action_link padding-10" id="selectAll" value="selectAll">全选</a>

Answer 1

许多jQuery方法（包括.attr()和.prop()）允许您传递回调函数而不是要设置的值。回调接收正在更改的属性的当前值，并应返回新值。这样，您可以为要更新的集合中的每个元素设置不同的值，具体取决于它们各自的起始值。

请注意，通常，在更新checked属性时，最好使用.prop()而不是.attr()。

所以：

＆＃13;

$(document).ready(function() {
  $('#selectAll').click(function(e){
    e.preventDefault();
    $("input:checkbox").prop('checked', function(i, current) { return !current; });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="fool1" id="fool1"> 
<input type="checkbox" name="fool2" id="fool2">

 <a href="#" class="action_link padding-10" id="selectAll" value="selectAll">全选</a>

＆＃13;

请注意，我显示的代码会单独反转复选框，但并未将它们全部设置为相同的值。因此，如果用户仅手动设置了一些复选框，则单击锚点不会将它们全部设置为相同。

Answer 2

使用prop而不是attr。尝试类似的东西：

$(document).ready(function() {
  $('#selectAll').click(function() {
      var $checkbox = $('input:checkbox');
      $checkbox.prop('checked', !$checkbox.prop('checked'));
  });
});

Answer 3

您应该使用 prop 而不是 attr 。见here。

$(input[type=checkbox]).prop('checked', true)。

根据您要实现的目标，您需要跟踪复选框的当前状态。

第一个链接#selectAll只保留当前状态的全局var checked，然后将其更改为相反的位置并相应地更新所有复选框。
第二个链接#selectAll2会跟踪检查了多少个复选框，如果它们全部被选中，则假定您要取消选中它们，如果至少检查了一个，则意图是全部检查它们。否则表现为第一个例子。

因此，这可能取决于您的意图/用户体验。

见这个例子：

$(document).ready(function() {
  var checked = false;
  $('#selectAll').click(function(){
    checked = !checked;
    $("input[type=checkbox]").prop('checked', checked);
  });
  
  var numChecks = $("input[type=checkbox]").length;
  var checked2 = false;
  $('#selectAll2').click(function() {
    var chked = $("input[type=checkbox]:checked").length;
    var allChecked = chked == numChecks;
    var anyChecked = chked > 0;
    if(allChecked) {
      checked2 = false;
    } else if(anyChecked) {
      checked2 = true;
    } else {
     checked2 = !checked2; 
    }

    $("input[type=checkbox]").prop('checked', checked2);
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="fool1" id="fool1"> 
<input type="checkbox" name="fool2" id="fool2">

 <a href="#" class="action_link padding-10" id="selectAll" value="selectAll">全选</a>

 <a href="#" class="action_link padding-10" id="selectAll2">全选</a>

使用href onClick选择所有HTML复选框

HTML

的jQuery

3 个答案: