Problem
You need to select and deselect all checkboxes using a single toggle, in this case another checkbox. Additionally, that toggle should automatically switch states if some (or all)of the checkboxes are selected individually:
Solution
Target the toggle directly using its class attribute and the :checkbox selector. Then
cycle through each toggle found, determine the associated checkboxes using.siblings(), and attach the change event listeners:
Discussion
Using .eq(0).trigger('change') immediately executes the .change() event for the first checkbox. This sets the state of the toggle and protects against Firefox and other browsers that hold on to radio and checkbox states when the page is refreshed. The .eq(0) is used to only trigger the first checkbox’s change event. Without .eq(0),the .trigger('change') would be executed for every checkbox, but since they all share the same toggle, you only need to run it once.
What will happen when JavaScript is disabled? You should hide the toggle checkbox and label by default in CSS. Then use JavaScript to add a class name to a parent element that would override the previous CSS rule:
|
|
J Query Related Interview Questions |
|
---|---|
HTML 4 Interview Questions | HTML Interview Questions |
HTML 5 Interview Questions | Zend Interview Questions |
PHP and Jquery Interview Questions | HTML+Javascript Interview Questions |
J Query Interview Questions | Javascript Objects Interview Questions |
Javascript Advanced Interview Questions | CodeIgniter Interview Questions |
JqueryUI Interview Questions | Dynamic HTML Interview Questions |
XQuery Interview Questions | jQuery Mobile Interview Questions |
JSON (JavaScript Object Notation) Interview Questions | Advanced jQuery Interview Questions |
J Query Related Practice Tests |
|
---|---|
HTML 4 Practice Tests | HTML Practice Tests |
HTML 5 Practice Tests | Zend Practice Tests |
PHP and Jquery Practice Tests | J Query Practice Tests |
CodeIgniter Practice Tests | Dynamic HTML Practice Tests |
JSON (JavaScript Object Notation) Practice Tests | Advanced jQuery Practice Tests |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.