If you are looking for a quick jQuery snippet that toggles multiple check-boxes checked status simply by clicking “Select All” checkbox (like in Gmail and many other web applications), here’s are few examples that might be useful for your HTML form. I’ve used them many times in my own projects and they work great!
If you have multiple check-box groups in single page, Here’s another example: https://www.sanwebe.com/question/multiple-lists
When user clicks “Select All” checkbox, the code simply iterate through all checkbox input fields with class class=”checkbox”, and applies the checked status (true or false) of clicked checkbox which has id id=”select_all”.
We also need to make sure, when user decides to un-check one of the checkbox from the list, the “Select All” checkbox should also be automatically unchecked.
The jQuery code :
Or If you are using jQuery 1.6 and later, you can easily use prop() method.
Copy this HTML into your project:
- Selecct All
- This is Item 1
- This is Item 2
- This is Item 3
- This is Item 4
- This is Item 5
- This is Item 6