Jquery ile formdaki tüm chexboxları seçmek (check all / uncheck all)


Eğer formunuzda milyonlarca checkbox inputu varsa ve hepsini tek tek seçili hale getirmek cehennem azabı gibi gelebilir. Bu işi salt javascript ile halledebileceğiniz gibi eğer sayfanızda zaten jquery kütüphanesi yükleniyorsa ufacık bir fonksiyon ile de kolaylıkla üstesinden gelebilirsiniz.

Jquery fonksiyonu

1
2
3
4
5
6
7
8
<script type="text/javascript">
  // Tüm checkboxları seç    
  function tumunuSec(status) {
    $("#kutucuklar input").each( function() {
      $(this).attr("checked",status);
     });
    }
</script>

Öncelikle sayfanın tepesine (veya harici .js dosyanıza) tüm işi halledecek olan fonksiyonu tanımlayın.

“kutucuklar” id’sine sahip kapsayıcı div

1
2
3
4
5
<div id="kutucuklar">
<input name="kutu1" value="1" type="checkbox">Kutu 1
<input name="kutu2" value="1" type="checkbox">Kutu 2
<input name="kutu3" value="1" type="checkbox">Kutu 3
</div>

Tüm checkbox elemanlarınızı “kutucuklar” id’sine sahip kapsayıcı bir divin içerisine yerleştirin. Dilerseniz bu div’i tüm formunuzu kapsayacak şekilde ayarlayabilir veya direkt formunuza bu id’yi tanımlayabilirsiniz.

Seçme / seçim kaldırma işlemini yapacak olan eleman

1
<input type="checkbox" onclick="tumunuSec(this.checked)">Tümünü Seç / Seçimi Kaldır

Son elemanı da yerleştirdikten sorna işiniz tamam, bu eleman sayesinde artık formunuzda yer alan tüm checkbox’ları seçili hale getirebilir veya tümünün seçimini aynı anda kaldırabilirsiniz.

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

8 Yorum

  1. Ahmet

    script kısmında #kutucular input (#kutucuklar input) eksik kalmış bilgin olsun.
    Paylaşım için teşekkürler, iyi çalışmalar..

  2. remre

    yaw kardeşim çok iyi oldu.. bu jikeryle çikboksları bi türlü seçemiyodum.. bir iyi oldu.. şimdi nereyi çikboks görsem seçesim geliyor hepsini.. beni bu dertten kurtardığın için ilk önce seni ve akabinde yalova kaymakamını tebrik ediyor içtenlikle afiyetlerinizi diliyor, uzattıkça uzatıyor ve bokunu çıkarıyorum.. evet yapabiliyorum bunu…

  3. Hakan Toplu

    Hocam, seçili iken seçilmemiş duruma getiriyorda fakat boş iken seçili hale getirmiyor. Nedeni nedir acaba?

  4. ahmettatar

    Caner HTML5 te artık bu tür işlevler çok basitleştirilmiş sanırım öyle değil mi senin HTML5 ile gelen Javascript bilgisi gerektirmeden kullanabileceğimiz elementler hakkında bilgin varmı yahut HTML5 ile ilgili türkçe bir kaynak tavsiye edebilir misin Caner?

  5. Caner
    Yazar

    @Hakan Toplu bir şeyleri yanlış yapmış olabilirsin, normalde her iki türlü de çalışıyor. http://www.pastebin.com aracılığıyla kodlarını paylaş istersen bir bakalım.

    @ahmettatar HTML5 henüz tam anlamıyla yaygınlaşmadı. Malesef benim bildiğim, önerebileceğim Türkçe bir kaynak yok fakat Javascript ile mukayese etmek doğru değil. Javascript’i de içeren bir kavram bu.

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir