Toggle Checkbox Checked Property Using jQuery

Toggle Checkbox Checked Property Using jQuery

Introduction:

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. You may like some of my previous articles 

Explanation:

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.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”type=”text/javascript”></script>

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’


<table>
    <tr>
        <td>
            <input type=”checkbox” class=”chk” value=”Value1″ title=”Checkbox1″ />Checkbox1
        </td>
    </tr>
    <tr>
        <td>
            <input type=”checkbox” class=”chk” value=”Value2″ title=”Checkbox1″ />Checkbox2
        </td>
    </tr>
    <tr>
        <td>
            <input type=”checkbox” class=”chk” value=”Value3″ title=”Checkbox1″ />Checkbox3
        </td>
    </tr>
    <tr>
        <td>
            <input type=”checkbox” class=”chk” value=”Value4″ title=”Checkbox1″ />Checkbox4
        </td>
    </tr>
    <tr>
        <td>
            <input type=”button” value=”Toggle” onclick=”return fnToggle();” title=”Toggle”/>
        </td>
    </tr>
</table>
 
Below is the javascript code i have used.

function fnToggle() {
    $(‘input[type=”checkbox”]’).each(function () {
        if ($(this).is(‘:checked’))
            $(this).prop(‘checked’, false);
        else
            $(this).prop(‘checked’, true);
    });
    return false;
}
 
In this code on button click i am calling a javascript function. That javascript function takes all the checkboxes in the page and for each checkboxes it is checking whether the checked property of that checkbox is checked or unchecked and if it is checked then i will make the checked property to unchecked and if it is unchecked then i will  make it checked.

Instead of doing like this we can do the same task in other way like mentioned below.

function fnToggleV2() {
    $(‘input[type=”checkbox”]’).each(function () {
        var chk = $(this);
        chk.prop(“checked”, !chk.prop(“checked”));
    });
}
 
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.

In the javascript function i have used .prop for setting the checked property. We can also use

To check the checkbox (by setting the value of the checked attribute) do


$(‘.myCheckbox’).attr(‘checked’, ‘checked’);
 
and for un-checking (by removing the attribute entirely) do

$(‘.myCheckbox’).removeAttr(‘checked’);

Conclusion:

Hope you learned  how to Toggle Checkbox Checked Property Using jQuery. Do you like this tutorial? Help us to improve. Please post your comments and feedback below.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!