C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

Using JQuery we can check whether a checkbox is checked or not.

Consider you have a check box like below

<input type="checkbox" id="checkbox1"/>

Using the below JQuery code, you can check whether the above checkbox is checked or not

if ($("#checkbox1").is(':checked')) {
    alert("checked");  // checked
}
else {
    alert("not checked"); // unchecked 
}

Note: is(':checked') returns TRUE if the checkbox is checked else it returns false.

You can also use below code to check checkbox is checked:

if ($("#checkbox1").attr("checked")) {
    alert("Checked");
}
else {
    alert("Unchecked");
}

Note: Since jQuery 1.6, The behavior ofjQuery.attr() has changed. So it is recommended not to use it.

Javascript Code to check checkbox's checked property:

var myCheckbox = document.getElementById('checkbox1');
 
myCheckbox.onchange = function () {
    if (this.checked) {
        alert("checked");
    }
    else {
        alert("not checked");
    }
}

In this way you can check whether a checkbox is checked ot not using JQuery

For more posts on JQuery please visit: JQuery

Checking the all checkboxes when the header checkbox is checked

Lets create a group of checkboxes

<input type="checkbox" id="headerCheckbox"/>
 
    <input type="checkbox" class="childCheckBox" id="Checkbox1"/>
    <input type="checkbox" class="childCheckBox" id="Checkbox2"/>
    <input type="checkbox" class="childCheckBox" id="Checkbox3"/>
    <input type="checkbox" class="childCheckBox" id="Checkbox4"/>
    <input type="checkbox" class="childCheckBox" id="Checkbox5"/>
    <input type="checkbox" class="childCheckBox" id="Checkbox6"/>

We have created a header checkbox and some child checkboxes. We have used same class(class="childCheckBox") for all the child checkboxes which are related to the header checkbox. Now, if we check the header checkbox all the child checkboxes should be checked.

For that, use the below JQuery code

$('#headerCheckbox').click(function () {
    var isheaderChecked = this.checked;
    $(".childCheckBox").each(function () {
        this.checked = isChecked;
    })
})

The above code will check all checkboxes with the class "childCheckBox" and also if you uncheck the header checkbox then all the child checkboxes will be unchecked.

Unchecking the header checkbox when any one of the child checkbox is unchecked

When you uncheck any one of the child checkbox then the header checkbox should also be unchecked. For that case use the following JQuery code

$("input[type='checkbox']:not(:first)").click(function () {
    var allChecked = true;
    $("input[type='checkbox']:not(:first)").each(function () {
        if (this.checked == false) {
            allChecked = false;
            $('#headerCheckbox').prop('checked', false);
        }
    })
    if (allChecked == true) {
        $('#headerCheckbox').prop('checked', true);
    }
})

In this way you can check or uncheck all the checkboxes when a master checkbox is checked.