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.
8 yorum
script kısmında #kutucular input (#kutucuklar input) eksik kalmış bilgin olsun.
Paylaşım için teşekkürler, iyi çalışmalar..
Uyarı için teşekkürler Ahmet, aceleyle bir harf arada kaynamış.
teşekkürler, elinize sağlık..
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…
Teşekkürler eline sağlık :)
Hocam, seçili iken seçilmemiş duruma getiriyorda fakat boş iken seçili hale getirmiyor. Nedeni nedir acaba?
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?
@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.