Toggle Checkboxes on/off

Question

I have the following:

$(document).ready(function() {     $("#select-all-teammembers").click(function() {         $("input[name=recipients\\[\\]]").attr('checked', true);     });                  }); 

I'd like the id="select-all-teammembers" when clicked to toggle between checked and unchecked. Ideas? that aren't dozens of lines of code?

Answer 1

You can write:

$(document).ready(function() {     $("#select-all-teammembers").click(function() {         var checkBoxes = $("input[name=recipients\\[\\]]");         checkBoxes.prop("checked", !checkBoxes.prop("checked"));     });                  }); 

Before jQuery 1.6, when we only had attr() and not prop(), we used to write:

checkBoxes.attr("checked", !checkBoxes.attr("checked")); 

But prop() has better semantics than attr() when applied to "boolean" HTML attributes, so it is usually preferred in this situation.