Jun 5 2009

JavaScript ile Tüm Checkbox'ları 2 Satır JS kodu ile Seçmek-Seçilirliğini Kaldırmak

Gönderen : Mahmut Er (11:56 PM)
0 yorum - Kategori : Javascript

JavaScript kullanarak bir form sayfasındaki tüm checkboxları seçmek yada seçilirliğini kaldırmak için genel ve bilindik yöntemde bazen gereksiz kod yazılmaktadır.Checkboxun sayfanın durumuna göre tanımlı olmaması yada sadece 1 tane olması gibi durumlarda gereksiz tanımlamalar yaparak JS kodlarımız olması gerekenden fazla olabilir.Bunun için sadece 2 satır ile her durumda çalışır bir JS fonksiyonu geliştirdim kullanımı oldukça kolay tek dikkat etmeniz gereken seçmek istediğiniz yada seçilirliğini kaldırmak istediğiniz checkboxların name'leri ne olursa olsun hepsinin aynı ID ismine sahip olması..

Örnek Uygulama

Aşağıda bu uygulamanın kaynak kodu bulunmaktadır.

<html>
<body background="../images/bg3.gif">
   <form name="kisisel_bilgiler" action="" method="">
    <table align="left" border="1" cellspacing="0" cellpadding="0">
        <tr bgcolor="FFCC66">
          <td>Renk</td>
  <td><input type="checkbox" name="all_select" id="all_select" onClick="allSelect(this.checked,'check_color')"></td>
        </tr>
        <tr bgcolor="9A9A9A">
        <td>Kırmızı</td>
  <td><input type="checkbox" name="red" id="check_color"></td>
        </tr>
<tr bgcolor="9A9A9A">
        <td>Mavi</td>
  <td><input type="checkbox" name="blue" id="check_color"></td>
        </tr>
<tr bgcolor="9A9A9A">
        <td>Beyaz</td>
  <td><input type="checkbox" name="white" id="check_color"></td>
        </tr>
<tr bgcolor="9A9A9A">
        <td>Sarı</td>
  <td><input type="checkbox" name="yellow" id="check_color"></td>
        </tr>
        <tr bgcolor="9A9A9A">
        <td>Yeşil</td>
  <td><input type="checkbox" name="green" id="check_color"></td>
        </tr>
    </table>
    </form>
</body>
</html>
<script>
function allSelect(is_checked,row_checkbox){
for(cl=0;cl<document.getElementsByName(row_checkbox).length;cl++)
   document.getElementsByName(row_checkbox)[cl].checked=is_checked;
}
</script>