Merhaba Arkadaşlar;
Uygulamaya başlamadan önce JQuery kütüphanelerini projemize ekliyoruz.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
Aşağıdaki gibi "checkboxlist" adıyla bir div sarmacımız ve içerisinde tanımlanan checkboxlarımız bulunmakta.Ve inputlarımızın hepsinin classı "chk" şeklinde.
Test etmek için iki buton atıyoruz.
"buttonClass" adındaki butonumuz alttaki checkboxlarda dönerek classına bakıyor ve chk gördüğü checkboxların value değerlerini almakta.
"buttonParent" butonumuz ise en dış div id sine bakarak(checkboxlist) içinde dönüp checkbox değerleri yakalamakta.
<div id="checkboxlist">
<div><input type="checkbox" value="1" class="chk"> Value 1</div>
<div><input type="checkbox" value="2" class="chk"> Value 2</div>
<div><input type="checkbox" value="3" class="chk"> Value 3</div>
<div><input type="checkbox" value="4" class="chk"> Value 4</div>
<div><input type="checkbox" value="5" class="chk"> Value 5</div>
<div>
<input type="button" value="Örnek Bir" id="buttonClass">
<input type="button" value="Örnek iki" id="buttonParent">
</div>
</div>
JQuery veya JavaScripts işlevleri aşağıda verilmektedir.
<script>
$(document).ready(function () {
/ * her onay kutusuna ekli olan sınıf temel alınarak onay kutusu değerlerini alınır * /
$("#buttonClass").click(function() {
getValueUsingClass();
});
/* div */
$("#buttonParent").click(function() {
getValueUsingParentTag();
});
});
function getValueUsingClass(){
var chkArray = [];
/ * Bir sınıfın 'chk' ekli tüm onay kutularını ara ve seçili olup olmadıklarını kontrol edin * /
$(".chk:checked").each(function() {
chkArray.push($(this).val());
});
/* "Alert" özelliğini kullanacağımız için virgülle güzelleştirelim :) */
var selected;
selected = chkArray.join(',') + ",";
if(selected.length > 1){
alert("Seçtiniz " + selected);
}else{
alert("Lütfen onay kutusundan en az bir tanesini seçiniz..");
}
}
function getValueUsingParentTag(){
var chkArray = [];
/* Ona bağlı 'checkboxlist' adı verilen ve kontrol edilip edilmediğini kontrol eden tüm onay kutularını arayın */
$("#checkboxlist input:checked").each(function() {
chkArray.push($(this).val());
});
/ * Virgülle ayrılmış diziye ayırmak * /
var selected;
selected = chkArray.join(',') + ",";
if(selected.length > 1){
alert("Seçtiniz " + selected);
}else{
alert("Lütfen onay kutusundan en az bir tanesini seçiniz..");
}
}
</script>
Örnek dosyayı buradan indirebilirsiniz..
Arkadaşlar diğer örneğimiz Checkbox "Tümünü Seç" olacaktır takipte kalınız..