Javascript ile Seçili Olan Checkboxların Değerlerini Yakalamak

10 Mart 2017 Cuma
1

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..



yorumlar
64x64

Tuğrul

5 Haziran 2017 Pazartesi

Merhaba, web sitenizde tanıtım yazısı yayınlatmak istiyoruz. Ücret bilgisi verebilir misiniz?

Yorum yaz