Bir Web Tasarımcısı Günlüğü

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