13.07.2014
4.00 / 1 oy

How To Check a Checkbox With jQuery?

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:

checkbox

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.

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>

 

How To Check a Checkbox With jQuery?
Bu makalenin telif hakkı ve tüm sorumlulukları yazara ait olup, şikayetler için lütfen bizimle iletişime geçiniz.
URL:
Etiketler:

Bu makale 1630 kez okundu

13.07.2014 tarihinde yazıldı
Reitix

Yorumlar

  • ahmet _49
    22.12.2015

    Türkçe olaymış daha iyi anlardık

  • vuuno
    14.11.2014

    nice article by the way

  • gokhan39
    04.11.2014

    İngilizce bilmiyorum ama Jquery kısmını kullanmak yeterli oluyor

  • miracle butterfly
    20.10.2014

    editörler onayladığına göre eklenebiliyormuş demek ki

  • enstantane53
    17.10.2014

    ingilizce makale de mi eklenebiliyor reitix'e?

  • paratoner
    30.09.2014

    thanks man! but can u translate it for Turkish?

Bu yazıya siz de yorum yapabilirsiniz

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.