1. Anasayfa
  2. Html

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

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

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

Bu İçeriğe Tepkin Ne Oldu?
  • 2
    ba_ar_l_
    Başarılı
  • 0
    gayet_yi
    Gayet İyi
  • 0
    te_ekk_rler
    Teşekkürler
  • 0
    anlamad_m
    Anlamadım
  • 0
    yetersiz
    Yetersiz
İlginizi Çekebilir
Subscribe
Bildir
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Yorum
Inline Feedbacks
View all comments