JavaScript Dersleri – Checkboxların Tümünü Seç veya Seçimi Kaldır

12284172421897139812CoD_fsfe_Checklist_icon.svg.med
Daha önceki JavaScript derslerimizde Checkbox kullanımını anlatıp seçili olan nesnelerin değerlerinin nasıl okunacağından bahsetmiştik, şimdi de farklı bir uygulama ile form içerisinde yer alan tüm Checkboxların seçili hale getirilmesi veya seçimin iptal edilmesi nasıl yapılacak onu açıklayalım. Kodlamaya geçmeden işlemin mantığını açıklayalım
İlk olarak form içerisine kontrol edilecek nesneler ekleniyor, yazdığımız script kodunda form içindeki tüm Checkboxlar bir değişkene aktarılıyor ve döngü içinde sırayla seçili ise iptal seçili değilse hepsi seçili hale geliyor 🙂

<script type="text/javascript">// <![CDATA[
checked = false;
function tumunusec (checkboxornek) {
var checkboxlar= document.getElementById('checkboxornek');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < checkboxlar.elements.length; i++)
{
checkboxlar.elements[i].checked = checked;
}
}
// ]]></script>
<b>Checkboxları Seçili Hale Getirme veya İptal Etme</b></pre>
<form id="checkboxornek"><input type="checkbox" name="kutu1" /><input type="checkbox" name="kutu2" />
<input type="checkbox" name="kutu3" />
Tümünü Seç veya İptal Et
<input onclick="tumunusec();" type="checkbox" name="checkall" /></form>
<pre>

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/14xaofd9/” style=”width:100%; height:200px; border:solid #4173A0 1px;”] i

Pin It on Pinterest