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.

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');