eseguire un'azione sulla casella di controllo selezionata o evento non selezionato sul modulo HTML

Question

Ho una casella di controllo su un modulo che è deselezionato per impostazione predefinita come al solito. ora voglio eseguire due azioni separate sullo stato selezionato e deselezionato di questa casella di controllo.

questa è la mia casella di controllo:

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

e questo è il mio script:

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

avverte solo uncheched !! qual è il modo migliore per farlo.

Answer 1

Possiamo farlo utilizzando JavaScript, senza bisogno di jQuery. Basta passare l'elemento modificato e lasciare che sia JavaScript a gestirlo.

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

Hai provato a utilizzare l'evento di modifica JQuery?

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

Poi si può anche rimuovere onchange="doalert(this.id)" dalla tua casella :)

Edit:

Non so se si utilizza JQuery, ma se non sei ancora usarlo , è necessario inserire il seguente script nella vostra pagina in modo da poter utilizzare:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

Answer 4

Se il debug il tuo codice utilizzando gli strumenti di sviluppo, noterai che this si riferisce all'oggetto finestra e non al controllo di input. Prendi in considerazione l'utilizzo dell'ID passato per recuperare l'input e controlla il valore checked.

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

Answer 5

Il problema è come hai attaccato l'ascoltatore:

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

ascoltatori in linea sono effettivamente avvolti in una funzione che si chiama con l'elemento come questo. Quella funzione chiama quindi la funzione doalert, ma non imposta il suo questo in modo che per impostazione predefinita l'oggetto globale (finestra in un browser).

Poiché l'oggetto finestra non ha una proprietà controllata, this.checked viene risolto sempre come falso.

Se volete questo entro doalert ad essere l'elemento, collegare l'ascoltatore con addEventListener:

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

Oppure, se si desidera utilizzare un listener in linea:

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