2011-01-21 12 views
40

Per qualche ragione, il mio modulo non vuole ottenere il valore di una casella di controllo ... Non sono sicuro che sia la mia codifica o no, ma quando provo e alert() il valore, ottengo undefined come risultato. Cosa ho sbagliato?Come determinare se una casella di controllo è selezionata?

<head> 
    <script> 
    var lfckv = document.getElementById("lifecheck").checked 
    function exefunction(){ 
     alert(lfckv); 
    } 
    </script> 
</head> 
<body> 
    <label><input id="lifecheck" type="checkbox" >Lives</label> 
</body> 

EDIT

Ho provato a cambiare a questa

function exefunction() { 
    alert(document.getElementById("lifecheck").checked); 
} 

Ma ora non vuole nemmeno execute. Cosa c'è che non va?

risposta

78

Posizionare var lfckv all'interno della funzione. Quando viene eseguita questa riga, il corpo non viene ancora analizzato e l'elemento "lifecheck" non esiste. Funziona perfettamente:

<html> 
    <head> 
     <script language="javascript" type="text/javascript"> 
      function exefunction(){ 
       var lfckv = document.getElementById("lifecheck").checked; 
       alert(lfckv); 
      } 
     </script> 
    </head> 
    <body> 
     <label><input id="lifecheck" type="checkbox" >Lives</label> 
     <button onclick="exefunction()">Check value</button> 
    </body> 
</html> 
5

Si sta tentando di leggere il valore della casella di controllo prima che venga caricato. Lo script viene eseguito prima dell'esistenza della casella di controllo. È necessario chiamare lo script al caricamento della pagina:

<body onload="dosomething()">

Esempio:

http://jsfiddle.net/jtbowden/6dx6A/

Siete inoltre manca un punto e virgola dopo la prima assegnazione.

+0

Il punto e virgola non è necessario per javascript. – Joel

+9

Ancora è buona pratica. –

1

La riga in cui si definisce lfckv viene eseguita ogni volta che il browser la trova. Quando lo metti in testa al tuo documento, il browser prova a trovare id lifeckeck prima che venga creato l'elemento lifecheck. È necessario aggiungere lo script sotto l'input lifecheck per far funzionare il codice.

1

prova ad imparare jQuery è un ottimo punto di partenza con javascript e semplifica davvero il codice e aiuta a separare il tuo js dal tuo html. includi il file js da CDN di google (https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js)

quindi nel tag di script (ancora nell'uso <head>) :

$(function() {//code inside this function will run when the document is ready 
    alert($('#lifecheck').is(':checked')); 

    $('#lifecheck').change(function() {//do something when the user clicks the box 
     alert(this.checked); 
    }); 
}); 
+25

-1 Penso che jQuery non sia sicuramente un buon punto di partenza per imparare JS. – Lee

+4

Di che diavolo stai parlando? Ho semplicemente affermato che dovresti avere familiarità con Javascript prima di cercare in altre librerie e framework. Che cosa ha a che fare con la separazione dei livelli? – Lee

+1

@Lee Context, Lee. Contesto. Hai visto la "soluzione"? La lettura mi riporta indietro agli anni '90. Chiaramente OP non ha una buona conoscenza degli eventi, JavaScript è molto basato sugli eventi e jQuery è molto bravo a costringerti a capirli. Non devi padroneggiare JavaScript per iniziare ad imparare jQuery. Non hai "semplicemente dichiarato" nulla tranne che non iniziare con jQuery. Cerca di essere costruttivo, non è quello che sono i downvotes. – Walf

-1
<!DOCTYPE html> 
<html> 
<body> 
    <input type="checkbox" id="isSelected"/> 
    <div id="myDiv" style="display:none">Is Checked</div> 
</body> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script> 
     $('#isSelected').click(function() { 
      $("#myDiv").toggle(this.checked); 
     }); 
    </script> 
</html> 
+2

OP non ha menzionato jquery? – atmd

+0

Ciao atmd, ora sto aggiungendo il codice completo. –

2

è possibile utilizzare questo codice, si può restituire true o false:

$(document).ready(fonction(){ 
 
    
 
    //add selector of your checkbox 
 

 
    var status=$('#IdSelector')[0].checked; 
 
    
 
    console.lot(status); 
 

 
});

-1

var elementCheckBox = document.getElementById("IdOfCheckBox"); 
 

 

 
elementCheckBox[0].checked //return true if checked and false if not checked

grazie

0

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
<body> 
 
<label><input class="lifecheck" id="lifecheck" type="checkbox" checked >Lives</label> 
 

 
<script type="application/javascript" > 
 
    lfckv = document.getElementsByClassName("lifecheck"); 
 
    if (true === lfckv[0].checked) { 
 
     alert('the checkbox is checked'); 
 
    } 
 
</script> 
 
</body> 
 
</html>

così dopo è possibile aggiungere eventi in javascript per avere manifestazione dinamica interessata con la casella di controllo.

grazie

Problemi correlati