Javascript: Checkbox’ların tümünü seç veya seçimi kaldır

Yazan: karflake | Tarih

1 Aralık 2008 | Yorum

Yorum Yok

Henüz puan verilmemiş

Loading ...

Javascript ile bir web sayfasındaki checkbox'ların tümünü seçmek ve gerektiğinde tümünün seçimini kaldırmak için izlenecek yol şu olabilir.

Önce sayfaya aşağıdaki fonksiyon eklenir.

PLAIN TEXT

JAVASCRIPT:

function tumunusecveyasecimikaldir()
    {
      //form1'deki eleman sayısı kadar dön
      for (var i=0; i<document.form1.elements.length; i++)
      {
        //sıradaki elemanı formelemani değişkenine aktar
        var formelemani=document.form1.elements[i];
        //elamanın adı lidercheckbox değilse, elamanın checked değerini
        //lidercheckbox adlı elemanın checked değeri ile eşitle
        //yani lidercheckbox seçili ise i. eleman da seçili olsun
        //lidercheckbox seçili değil, i. eleman da seçili olmasın
        if (formelemani.name!='lidercheckbox')
          formelemani.checked=document.form1.lidercheckbox.checked;
      }
    }

Daha sonra aşağıdaki gibi bir checkbox, form1 isimli bir formun içinde oluşturulur. Bu checkbox seçildiğinde diğer checkbox'larda seçilecek, bu checkbox'ın seçimi kaldırıldığında diğer checkbox'ların da seçimi kalkacaktır.

PLAIN TEXT

JAVASCRIPT:

<input type="checkbox" name="lidercheckbox" onclick="tumunusecveyasecimikaldir();">

Benzer mantıkla, bir formdaki checkbox'ların seçim değerini terslemek için de aşağıdaki fonksiyon kullanılabilir.

PLAIN TEXT

JAVASCRIPT:

function secimitersle()
    {
      //form1'deki eleman sayısı kadar dön
      for (var i=0; i<document.form1.elements.length; i++)
      {
        //sıradaki elemanı formelemani değişkenine aktar
        var formelemani=document.form1.elements[i];
        //elamanın adı lidercheckbox değilse,
        //checked değerini tersle
        if (formelemani.name!='lidercheckbox')
          formelemani.checked=!formelemani.checked;
      }
    }

Bu fonksiyon'da aşağıdaki gibi bir link ile çağrılabilir.

PLAIN TEXT

JAVASCRIPT:

<a href="javascript:secimitersle();">Seçimi tersle</a>

Bu fonksiyonları çok kullandığımdan, aşağıya fonksiyonların yorumsuz hallerini de yazıyorum.

Tümünü seçme/seçmeme fonksiyonu:

PLAIN TEXT

JAVASCRIPT:

<script language=javascript>
    function tumunusecveyasecimikaldir()
    {
      for (var i=0; i<document.form1.elements.length; i++)
      {
        var formelemani=document.form1.elements[i];
        if (formelemani.name!='lidercheckbox')
          formelemani.checked=document.form1.lidercheckbox.checked;
      }
    }
  </script>

Seçimi tersleme fonksiyonu:

PLAIN TEXT

JAVASCRIPT:

<script language=javascript>
    function secimitersle()
    {
      for (var i=0; i<document.form1.elements.length; i++)
      {
        var formelemani=document.form1.elements[i];
        if (formelemani.name!='lidercheckbox')
          formelemani.checked=!formelemani.checked;
      }
    }
  </script>