In this article i am going to explain how to toggle the Checked property of the checkbox using jQuery. In my previous article i have explained about How to change Placeholder text color on focus using css during on focus and on blur events.
While working on a web form i got a requirement. That is in the form there will be four checkboxes. And there will be a button. While clicking that button the checkboxes which is already checked should be unchecked and the checkboxes which is not checked should be checked.
I have included the jQuery library in the page. Below is the code.
Below is the html code i have used. The four checkboxes have the common class called check so we can access all the check boxes using the class itself. Or you can use the input selector mentioning that type='checkbox'
Instead of doing like this we can do the same task in other way like mentioned below.
In this function in the for each loop i am assigning the checkbox object to a variable. And setting checked property of the element which is opposite the current property of the own element.
To check the checkbox (by setting the value of the checked attribute) do
and for un-checking (by removing the attribute entirely) do