Skip to content
Mayıs 21, 2007 / Erkan

CheckBox Listesi Hepsini Seç/Temizle (CheckBox List Check All/Clear All )


CheckBox Listesi

Web sayfalarımızda çoğu zaman checkboxlar ile seçilmesi istenen listeler kullanırız, aşağıda checkbox listelerinin başında yer alan “Hepsini seç” ve “Temizle” fonksiyonlarının bir örneğini görebilirsiniz.

Sayfamızın “Head” bölümüne eklememiz gereken java script bölümü

<script language="JavaScript" type="text/javascript">
function HepsiniSec(divId)
{
var elmnts = document.getElementById(divId)
.getElementsByTagName('input');
for (var i = 0; i < elmnts.length; i++)
{
if (elmnts[i].id.indexOf('chkl') == 0)
{
if (elmnts[i].checked == false)
{
elmnts[i].checked = true;
}
}
}
}

function Temizle(divId)
{
var elmnts = document.getElementById(divId)
.getElementsByTagName('input');
for (var i = 0; i < elmnts.length; i++)
{
if (elmnts[i].id.indexOf('chkl') == 0)
{
if (elmnts[i].checked == true)
{
elmnts[i].checked = false;
}
}
}
}
</script>

Yukarıdaki javascript fonksiyonları checkbox listesinin yer aldığı taşıyıcı bloğunu (div) referans alır ve taşıyıcı blok içindeki bütün input taglerini çağırır. Daha sonra çağırılan koleksiyon içinde dönülürek ID’si “chkl” ile başlayan input nesneleri tespit edilir. Bir sonraki adımda ise tespit edilen input nesnesinin seçili olup olmadığı kontrol edilerek seçme yada temizleme işlemleri gerçekleştirilir.

CheckBox listesi için yazılması gereken HTML bölüm.

Aşağıdaki kodları HTML sayfanızın “body” etiketleri arasına yerleştirmeniz yeterli.

<div id="checkBoxListesi">
<p><a href="#" onclick="HepsiniSec('checkBoxListesi')">Hepsini Seç</a>
| <a href="#" onclick="Temizle('checkBoxListesi')">Temizle</a></p>
<input id="chkl_1" type="checkbox" /><label for="chkl_1">Check Box 1</label><br />
<input id="chkl_2" type="checkbox" /><label for="chkl_2">Check Box 2</label><br />
<input id="chkl_3" type="checkbox" /><label for="chkl_3">Check Box 3</label><br />
<input id="chkl_4" type="checkbox" /><label for="chkl_4">Check Box 4</label><br />
<input id="chkl_5" type="checkbox" /><label for="chkl_5">Check Box 5</label><br />
<input id="chkl_6" type="checkbox" /><label for="chkl_6">Check Box 6</label><br />
</div>


Örnek Dosyayı bilgisayarınıza yüklemek için;

http://www.webtasarimcisi.com/erkana/CheckBoxListesi.zip

3 Yorum

Yorum Yapın
  1. Serdar / Ağu 29 2007 3:53 am

    Merhaba,
    Gerçekten bu kodlar çok makbule geçti. Alıp veri tabanı formum üzerinde uyguladım. Ayrıca anlatımında gayet anlaşılır ve güzel olmuş. Benim gibi bu işlerden az anlayan birisi için bile güzel açıklama.
    Teşekkürler…

  2. şengül / Şub 16 2009 9:57 pm

    kodlar için teşekkürler… ama istediğim kodların anlamlarını bulamadım ben c# programında kod yazarken “checkBox1.” dediğimizde hani otomatik olarak bütün kodlar çıkıo ya işte ben o kodların anlamlarını istemiştim:(

  3. Ahmet ARDUÇ / Tem 26 2012 5:12 am

    Paylaşım için teşekkürler.. Gayet güzel çalışıyor.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: