serkandaglioglu.com

İndir Demo

Bir html tablo içerisinde listelediğimiz verilerin solunda genelde toplu işlemler uygulamak için checkbox inputları koyarız. Jquery ile bu checkboxları tek seferde seçitiren hem çok kısa hemde performans olarak hızlı olan kodu sizlerle paylaşmak istedim.

HTML

<table id="tablo">
 <thead>
      <tr>
          <th width="20px"><input type="checkbox" class="tumunu-sec" title="Hepsini Seç"></th>
          <th>Kategoriler</th>
      </tr>
 </thead>

 <tbody>
      <tr>
           <td><input type="checkbox" name="kategoriler"></td>
           <td>Php</td>
      </tr>
      <tr>
           <td><input type="checkbox" name="kategoriler"></td>
           <td>Mysql</td>
      </tr>
      <tr>
           <td><input type="checkbox" name="kategoriler"></td>
           <td>Html</td>
      </tr>
      <tr>
           <td><input type="checkbox" name="kategoriler"></td>
           <td>Css</td>
      </tr>
      <tr>
           <td><input type="checkbox" name="kategoriler"></td>
           <td>Jquery</td>
      </tr>
 </tbody>
</table>

Jquery

$(function () {
    $(".tumunu-sec").click(function(){
         $(this).closest('table')
                .find(':checkbox').attr('checked', this.checked);
    });
});

Burda jquery metodu olan closest o an seçili nesnenin kendisi de dahil olmak üzere
üst elementlerden en yakın olanını seçer. Yani biz yukarıda closest metoduna 'table' paramtresini gönderirken bize "tumunu-sec" adlı classa sahip checkbox'a en yakın table elementini seç demiş olduk.

İndir Demo