3

I'm trying to set onClick on href which able to select all the checkbox, however my code are able to select all the checkbox but how do I deselect the checkbox if I onClick the button again? Kindly advise.

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);
    });
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Morgan Ng
  • 813
  • 2
  • 10
  • 22

3 Answers3

2

Many jQuery methods, including .attr() and .prop(), let you pass a callback function instead of a value to set. The callback receives the current value of the property being changed, and should return the new value. In that way you can set different values for each element in the set being updated depending on their individual starting values.

Note that in general, when updating the checked property it is better to use .prop() rather than .attr().

So:

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

Note that the code I've shown inverts the checkboxes individually, it doesn't set them all to the same value. So if the user has manually set only some of the checkboxes then clicking the anchor won't set them all to be the same.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
1

Use prop instead of attr. Try something like that:

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

You should be using prop instead of attr. See here.

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

Depending on what you're trying to achieve you need to keep track of the current state of the checkboxes.

  • The first link #selectAll just keeps a global var checked for current state, then changes it to the opposite and updates all checkboxes accordingly.

  • Second link #selectAll2 keeps track of how many checkboxes are checked if they're all checked assumes you want to uncheck them, if at least one is checked then the intent is to check them all. Else behave as the first example.

So it might depend on your intent/user experience.

See this example:

$(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>
Eduardo Romero
  • 1,159
  • 8
  • 10
  • Won't this do the same thing as the OP's code? The question says that the code shown works, but the problem is how to have a second click on the anchor uncheck the checkboxes again. – nnnnnn Oct 10 '16 at 02:28
  • Yeah, I miss read the question. I've updated the snippet. Thanks! – Eduardo Romero Oct 10 '16 at 05:13