jQuery ile Toplu Seçme işlemi Toplu Checkbox İşaretleme

Webmaster Erdinç Koç 3.610 Görüntüleme

Bu Yazımda jQuery ile toplu checkbox seçme işlemini anlatmaya çalışacağım. Şimdi bu işlem genellikle toplu yorum onaylama vs. toplu silme gibi işlemlerde kullanmak istediğimiz ancak beceremediğimiz bir husustur. Bu yazımda işin sadece jQuery kısmını anlatacağım. işin php kısmını ise php programlama kategorisinde anlatacağım. Checkbox tan gelen toplu veriyi array olarak alıp işleme koyma işlemi ayrı bir mevzudur.

Biz bu yazımızda sadece görsel kısmına değineceğiz. ilk olarak sayfamıza jquery çağırıyoruz. Ben bunun için google api yi kullanıyorum.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js” type=”text/javascript”></script>

Daha sonra jQuery kodumuz :

<script type=”text/javascript”>
$(function () {
$(“.tumunu-sec”).click(function(){
$(this).closest(‘table’)
.find(‘:checkbox’).attr(‘checked’, this.checked);
});
});
</script>

Şimdi de tablolarımız. :

<table id=”tablo”>
<thead>
<tr>
<th width=”20px”><input type=”checkbox” class=”tumunu-sec” title=”Tümünü 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>

Yukarıdaki jQuery kodlarını <head> … </head> tagları arasında çağırmayı unutmayınız.

Bu gönderiye oy ver

Sosyal Ağlarda Paylaş

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir