How to create "check/uncheck all" with checkboxes?

Question

I want to have a button, to check or uncheck all checkbox.

This is my Markup:

<div id="container">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>
<button type="button" id="addAll">add all</button>
<button type="button" id="removeAll">remove all</button>

And this is my script:

$("#addAll").click(function() {
  $("#container input:checkbox").attr('checked', 'checked');
});
$("#removeAll").click(function() {
  $("#container input:checkbox").removeAttr('checked');
});

But it does not work as expected:

Check all, works
Uncheck all, works
Check all again, nothing happens

What could be the error?

See this fiddle

@CBroe there seems no other question on SO that points to this issue. May be the accepted answer is duplicate, but this question doesnt deserve to be flagged. — rishabh dev, Jul 21 '16 at 17:18

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

$("#addAll").click(function() {
  $("#container input:checkbox").prop('checked', true);
});
$("#removeAll").click(function() {
  $("#container input:checkbox").prop('checked',false);
});

This is probably a bug in jquery, because using native setAttribute and removeAttribute works fine.

https://jsfiddle.net/jz5p57k9/

I have opened a bug for Jquery team, you can follow it here: https://github.com/jquery/jquery/issues/3242#issuecomment-234315378

For the difference between .attr and .prop, please see this question: .prop() vs .attr()

edited May 23 '17 at 11:58

Community

1
1

answered Jul 21 '16 at 14:37

rishabh dev

1,711
1
15
26

Question is about solving problem of current code. You should solve problem instead changing it. – Mohammad Jul 21 '16 at 14:39
Thanks, it works. Why does my method not work? – Christian Gollhardt Jul 21 '16 at 14:39
2

Without an explanation, this is a low-quality answer. – Jul 21 '16 at 14:44
Searching hard for it @squint. – rishabh dev Jul 21 '16 at 14:46
2

@rishabh I edited your question and added a link to a question that explains the difference between attr/propr – CBroe Jul 21 '16 at 14:47
@CBroe: Your edit doesn't explain why `.attr/removeAttr()` not work. – Jul 21 '16 at 15:11
@squint: If you read the whole thing, and understand what the difference between attributes and properties is, it should. – CBroe Jul 21 '16 at 17:01

How to create "check/uncheck all" with checkboxes?

1 Answers1