Select 所有 HTML 个带有 href onClick 的复选框

Question

我正在尝试在 href 上设置 onClick，它能够 select 所有复选框，但是我的代码能够 select 所有复选框但是如何如果我再次 onClick 按钮，是否取消 select 复选框？请指教。

HTML

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

jQuery

$(document).ready(function() {
    $('#selectAll').click(function() {
        $("input:checkbox").attr('checked', true);
    });
});

Answer 1

许多 jQuery 方法，包括 .attr() 和 .prop()，允许您传递回调函数而不是要设置的值。回调接收正在更改的属性的当前值，并且应该 return 新值。通过这种方式，您可以根据各自的起始值为正在更新的集合中的每个元素设置不同的值。

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

所以：

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

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

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

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)。

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

第一个 link #selectAll 只是为当前状态保留一个全局 var checked，然后将其更改为相反的状态并相应地更新所有复选框。
第二个 link #selectAll2 跟踪检查了多少个复选框，如果它们都被选中假设你想取消选中它们，如果至少有一个被选中那么目的是检查所有这些。其他行为与第一个示例相同。

所以这可能取决于您的 intent/user 经验。

看这个例子：

$(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>

Select 所有 HTML 个带有 href onClick 的复选框

Select all HTML checkboxes with href onClick

html

javascript

jquery

jquery-events

HTML

jQuery