Bu yazımızda, DOM nesnelerinden INPUT-checkbox (onay kutusu) özelliklerinden yararlanarak, tüm kutuları seçme işlemi üzerine bir uygulama yapacağız:
Uygulama:
Aşağıdaki gibi bir yapımız olsun, başlıktaki kutu seçilince diğer kutuların seçili, seçim kaldırılınca da boş olmasını istiyoruz:
Html Form gösterimi:
<form name="formName">
<table>
<thead><tr><th><input type="checkbox" name="all" value="" onclick="selectAll('formName')" /></th><th>Ders</th><th>Konu</th><th>Bölüm</th></tr></thead>
<tbody>
<tr><td><input type="checkbox" name="sec" value="" /></td><td>JQuery Giriş</td><td>jQuery API açıklamalar</td><td>jQuery</td></tr>
<tr><td><input type="checkbox" name="sec" value="" /></td><td>Html Dom Nesne</td><td>Nesne Açıklamaları</td><td>JS</td></tr>
<tr><td><input type="checkbox" name="sec" value="" /></td><td>PHP ve Mysql</td><td>MySQL ile Veritabanı bağlantısı</td><td>PHP</td></tr>
</tbody>
</table>
</form>
Javascript kodları:
<script type="text/javascript">
function selectAll(formName){
var selectName=document.formName.sec;
var checkNumber= selectName.length;
if(document.formName.all.checked==false){
for(i=0; i < checkNumber; i++){
selectName[i].checked=false;
}
}else{
for(i=0; i < checkNumber; i++){
selectName[i].checked=true;
}
}
}
</script>
Açıklamalar:
- 2. Tablomuzun başlık kısmında bulunan "checkbox" tıklandığında (onclick) fonsiyonumuzu ("selectAll()") çağırıyoruz parametre olarak da formun ismini(name) gönderiyoruz
- 3. Javascirpt kodlarımızda ilk önce seçili hale gelecek checkbox ismini ("sec") kullanarak selectName adında bir değişkene atıyoruz
- 4. Kaç adet seçilecek checkbox olduğunu belirliyoruz
- 7. Tümünü seçecek olan checkbox'ın ("all") değerine göre bir sorgu oluşturup "for" döngüsüyle de kutuları işaretliyoruz veya temizliyoruz
Kolay gelsin, görüşmek üzere...
