A common challenge, and one I haven’t had to tackle in quite some time is select and deselect all functionality for a group of checkboxes. Below I will show you how you can add this functionality to your website with 3 simple lines of javascript / jQuery code.
$("#mySelectAll").click(function() { $("INPUT[type='checkbox'][@name='myCheckboxes']").attr("checked", $(this).is(":checked")); });
Your HTML would look something like this..
<input type='checkbox' id='mySelectAll' value='1'> Select All <input type='checkbox' name='myCheckboxes' value='1'> One <input type='checkbox' name='myCheckboxes' value='2'> Two <input type='checkbox' name='myCheckboxes' value='3'> Three <input type='checkbox' name='myCheckboxes' value='4'> Four
Just be sure to include the javascript in your document ready, or include the lines after your html is rendered.
One Response
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Thank’s for this simple example. And I think will be better do like next: $(“#mySelectAll”).click(function() {
$(“.myCheckboxes”).attr(“checked”, $(this).is(“:checked”));
});