In the following example, we will check/uncheck a checkbox from button click and without postback (following examples created with Asp.Net).
Our page design will be like:
And the checkbox will be checked/unchecked with button clicks. You can run this example with pure html tags, but I wrote them in Asp.Net for larger description.
Html part of the page:
<div>
<asp:CheckBox ID="cb1" ClientIDMode="Static" runat="server" CssClass="cb"/>
<br />
<button id="clicker" onclick="cbClick(); return false;">Toggle Check</button>
</div>
And the javascript codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function cbClick() {
if ($('#cb1').prop('checked'))
$('#cb1').prop('checked', false);
else
$('#cb1').prop('checked', true);
};
</script>
And finally, the button clicks leads to check/uncheck our checkbox.
How To Check All Checkboxes with Jquery?
The upper example is selecting the checkbox that has the "cb1" id. But we can modify it for a class name and check/uncheck all the checkboxes from another checkbox.
Jquery codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#cbAll').click(function (event) {
if (this.checked) {
$('.cb input').each(function () {
this.checked = true;
});
} else {
$('.cb input').each(function () {
this.checked = false;
});
}
});
});
</script>
Html codes:
<div>
<asp:CheckBox ID="cb1" ClientIDMode="Static" runat="server" CssClass="cb"/><br />
<asp:CheckBox ID="cb2" ClientIDMode="Static" runat="server" CssClass="cb"/><br />
<asp:CheckBox ID="cb3" ClientIDMode="Static" runat="server" CssClass="cb"/><br />
<asp:CheckBox ID="cb4" ClientIDMode="Static" runat="server" CssClass="cb"/><br />
<asp:CheckBox ID="cb5" ClientIDMode="Static" runat="server" CssClass="cb"/><br />
<br />
<asp:CheckBox ID="cbAll" ClientIDMode="Static" runat="server" Text="Check/Uncheck All"/>
</div>