html formunda onay kutusu işaretli veya işaretlenmemiş bir eylem gerçekleştirin

Question

Her zamanki gibi varsayılan olarak işaretlenmemiş bir formda bir onay kutunuz var. şimdi bu onay kutusunun işaretli ve işaretlenmemiş durumunda iki ayrı eylem gerçekleştirmek istiyorum.

bu benim onay kutusu:

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this.id)"/> 
</form> 

ve bu benim senaryom:

function doalert(id){ 
    if(this.checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
} 

sadece uncheched uyarır !! Bunu yapmanın en iyi yolu nedir.

Answer 1

Bunu jQuery gerekmeden JavaScript kullanarak yapabiliriz. Sadece değiştirilen öğeyi geçir ve JavaScript'in ele almasına izin ver.

HTML

<form id="myform"> 
    syn<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)"/> 
</form> 

JS

function doalert(checkboxElem) { 
    if (checkboxElem.checked) { 
    alert ("hi"); 
    } else { 
    alert ("bye"); 
    } 
} 

Demo Here

Answer 2

<form> 
    syn<input type="checkbox" name="checkfield" id="g01-01" /> 
</form> 

js:

$('#g01-01').on('change',function(){ 
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked'; 
    alert(_val); 
}); 

Answer 3

JQuery değişiklik olayını kullanarak denediniz mi?

$("#g01-01").change(function() { 
    if(this.checked) { 
     //Do stuff 
    } 
}); 

Sonra da onay kutusu :) dan onchange="doalert(this.id)" kaldırabilir

Düzenleme:

henüz kullanmadığınız takdirde seni JQuery kullanıyorsanız biliyorum, ama yok , aşağıdaki betiği sayfanıza koymanız gerekir, böylece kullanabilirsiniz:

Answer 4

Hata ayıklarsanız kodunuzu geliştirici araçlarını kullanarak, this'un giriş nesnesini değil, pencere nesnesini ifade ettiğini fark edeceksiniz. Girişi almak için iletilen kimlik kodunu kullanmayı düşünün ve checked değerini kontrol edin.

function doalert(id){ 
    if(document.getElementById(id).checked) { 
    alert('checked'); 
    }else{ 
    alert('unchecked'); 
    } 
} 

Answer 5

sorun dinleyici ekledim nasıl:

<input type="checkbox" ... onchange="doalert(this.id)"> 

Inline dinleyici etkin bir bu olarak eleman ile çağrılan bir işlevde sarılmıştır. Bu işlev daha sonra doalert işlevini çağırır, ancak değerini olarak ayarlamaz, böylece genel nesneye (tarayıcıdaki pencere) varsayılan olur.

Pencere nesnesi, işaretli olduğundan özelliği, this.checked her zaman false olarak giderilmiştir.

Eğer eleman olmak doalert içinde bu istiyorsanız, addEventListener kullanarak dinleyici ekleyin:

window.onload = function() { 
    var input = document.querySelector('#g01-01'); 
    if (input) { 
    input.addEventListener('change', doalert, false); 
    } 
} 

Yoksa bir satır içi dinleyicisi kullanmak istiyorsanız:

<input type="checkbox" ... onchange="doalert.call(this, this.id)">