Şimdi basit ve çok işinize yarayacak bir fonksiyon yapalım. Diyelim ki bir tablonuz var ve birden çok satırları seçip onlarla ilgili işlem yapmak istiyorsunuz. Bunun için header satırına bir checkbox koyuyorsunuz ve her satırda da bir checkbox oluyor. Üstteki checkbox seçilince alttakiler de seçilecek ve bunlarla işlem yapacaksınız.
Önce örnek tablomuzu hazırlayalım.
<!-- Buton oluşturalım -->
<button type="button" id="islem_yap">İşlem yap</button>
<!-- Örnek tablomuzu oluşturalım -->
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<th><input type="checkbox" id="all"></th>
<th>Ürün adı </th>
<th>Kategori</th>
</tr>
<tr>
<td><input type="checkbox" class="cb" name="urun_id" value="1"></td>
<td>Kalem</td>
<td>Kırtasiye</td>
</tr>
<tr>
<td><input type="checkbox" class="cb" name="urun_id" value="2"></td>
<td>Kalem</td>
<td>Kırtasiye</td>
</tr>
<tr>
<td><input type="checkbox" class="cb" name="urun_id" value="3"></td>
<td>Kalem</td>
<td>Kırtasiye</td>
</tr>
</table>
Jquery kütüphanesini sayfamıza dahil edelim ve jquery fonksiyonlarımızı hazırlayalım
<!-- JQUERY kütüphanesini çağıralım-->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
// tablo başındaki tümünü seç change olduğunda bir fonksiyon
// oluşturalım
$("#all").change(function(){
var durum=false;
if($(this).is(":checked")) // seçili olup olmadığına bakalım
durum = true;
// Seçili durumuna göre cb class lı checkboxları döngüye sokup işlem yaptıralım
$(".cb").each(function(){
$(this).prop("checked", durum);
})
});
// işlem yap butonuna basınca seçilenlerin idlerini alsın
$("#islem_yap").click(function(){
// önce boş değişken tanımlıyoruz.
var idler = "0";
var secili_sayi = 0;
// checkboxları döngüye sokuyoruz
$(".cb").each(function(){
// seçili olanları idler değişkenine ekliyoruz,
// sayacı 1 artırıyoruz.
// Burada isterseniz en az seçim miktarı da belirtirsiniz
if($(this).is(":checked")){
secili_sayi ++;
idler +=","+$(this).val();
}
})
// eğer seçili checkbox yoksa uyarı ver.
if(secili_sayi==0){
alert("en az bir tane seçmelisin");
}else{ // seçili olanları göster
alert(idler);
}
})
})
</script>
Çalışan kodu buradan görebilirsiniz.
Ürün adı | Kategori | |
---|---|---|
Kalem | Kırtasiye | |
Defter | Kırtasiye | |
Silgi | Kırtasiye |
Çok yararlı çok güzel bir site olmuş.