Comment puis-je vérifier si une case est cochée?

207

Je crée une application Web mobile avec jQuery Mobile et je souhaite vérifier si une case est cochée. Voici mon code.

<script type=text/javascript>
  function validate(){
    if (remember.checked == 1){
      alert("checked") ;
    } else {
      alert("You didn't check it! Let me check it for you.")
    }
  }
</script>

<input id="remember" name="remember" type="checkbox" onclick="validate()" />

Mais pour une raison ou une autre, il ne l'exécute pas.

Veuillez aider!

---- EDIT ----- C'est ce que j'ai pour le moment.

<DIV data-role="content" data-theme="g">
    <DIV class=ui-grid-g-login>
        <FORM method=post action=[$=PROBE(266)/] data-theme="C">
            <P>~DATA_ERROR~</P>
            <div id="mail" data-role="fieldcontain">
                <label for="mail">Email:*</label>       
                <input id="mail" name="mail" type="email" />
            </div>
            <div id="pass" data-role="fieldcontain">
                <label for="pass">Paswoord:*</label>        
                <input id="pass" name="pass" type="password" />
            </div>
            <div id="remember" data-role="fieldcontain">
                <label for="remember">Onthoud mij</label>       
                <input id="remember" name="remember" type="checkbox" onclick="validate()" />
            </div>
            <P><INPUT class=btn name=submit value=Login type=submit  onclick="validate()"></P>  
        </FORM>
    </DIV>
</DIV><!-- /content -->

<script type=text/javascript>
function validate(){
    var remember = document.getElementById('remember');
    if (remember.checked){
        alert("checked") ;
    }else{
        alert("You didn't check it! Let me check it for you.")
    }
}
</script>

----ÉDITER--

Résolu, le problème était que le contenu du champ était également nommé `` se souvenir ''

Steaphann
la source
1
Qu'est- rememberce que dans ce contexte: if (remember.checked == 1){???
PeeHaa
Plus tard, il devrait se souvenir de l'email et du mot de passe. C'est pour une page de connexion
Steaphann
Ce que j'essaie de dire, c'est que rememberc'est undefineddans ce contexte. Essayez console.log(remember);.
PeeHaa
Quelle version de HTML utilisez-vous? Ce n'est pas vraiment du XHTML, n'est-ce pas?
Mr Lister
Comme @Steaphann l'a mentionné dans l'édition, le code n'a pas fonctionné car il y a deux éléments avec le même identifiant dans le html. <div id="remember" data-role="fieldcontain">et <input id="remember" name="remember" type="checkbox" onclick="validate()" />. Aucune des réponses n'a attrapé ce problème.
Antony

Réponses:

289

checkedest la booleanpropriété afin que vous puissiez l'utiliser directement dans les IFconditions: -

 <script type="text/javascript">
    function validate() {
        if (document.getElementById('remember').checked) {
            alert("checked");
        } else {
            alert("You didn't check it! Let me check it for you.");
        }
    }
    </script>
Pranav
la source
2
Je reçois toujours le message «Vous ne l'avez pas vérifié! Laissez-moi vérifier pour vous.
Steaphann
Non, ça marche bien pour moi; je reçois les deux messages d'alerte.
Pranav
@Steaphann Avez-vous remplacé le mot «rappelez-vous» par votre identifiant de case à cocher? ... oh, vient de remarquer 2012 0.o ... ps vous avez oublié le point-virgule après la deuxième déclaration d'alerte
josh.thomson
.. Que faire si je ne veux pas qu'il le vérifie pour moi et que je veux juste voir s'il est vérifié ou non?
Mark Kramer
@ josh.thomson les points-virgules sont facultatifs.
kojow7
66

Essaye ça:

function validate() {
  var remember = document.getElementById("remember");
  if (remember.checked) {
    alert("checked");
  } else {
    alert("You didn't check it! Let me check it for you.");
  }
}

Votre script ne sait pas quelle est la variable remember. Vous devez d'abord obtenir l'élément en utilisant getElementById ().

clem
la source
1
Vous devriez également conseiller de supprimer cela == 1. Son fonctionne uniquement à cause de deux erreurs. En fait, la valeur est trueou false, il devrait simplement utiliserif( remeber.checked )
jAndy
Je reçois toujours le message «Vous ne l'avez pas vérifié! Laissez-moi vérifier pour vous.
Steaphann
16

Cela devrait vous permettre de vérifier si l'élément avec id='remember'est'checked'

if (document.getElementById('remember').is(':checked')
Peter
la source
4
isn'appartient pas à l'objet élément DOM
yves amsellem
12
.is()- est une fonction jQuery. .checkedest javascript.
max kaplan
8

Si vous utilisez ce formulaire pour une application mobile, vous pouvez utiliser l'attribut requis html5. vous ne voulez pas utiliser de validation de script java pour cela. Ça devrait marcher

<input id="remember" name="remember" type="checkbox" required="required" />
shenbaga kannan
la source
5

utiliser comme ça

<script type=text/javascript>
function validate(){
if (document.getElementById('remember').checked){
          alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>

<input id="remember" name="remember" type="checkbox" onclick="validate()" />
Hkutluay
la source
1
Je reçois toujours le message «Vous ne l'avez pas vérifié! Laissez-moi vérifier pour vous.
Steaphann
@ user1251632 WFM aussi. Pouvez-vous modifier votre question et montrer ce que vous avez maintenant? Peut-être avez-vous fait une erreur de copier-coller.
Mr Lister
document.getElementById ('Remember'). checked == 1 a été modifié par moi avant votre commentaire .. c'est peut-être le problème.
hkutluay
4

J'utilise ceci et cela fonctionne pour moi avec Jquery :

Jquery:

var checkbox = $('[name="remember"]');

if (checkbox.is(':checked'))
{
    console.log('The checkbox is checked');
}else
{
    console.log('The checkbox is not checked');
}

C'est très simple, mais ça marche.

Cordialement!

Radames E. Hernandez
la source
4

Utilisez ce code simple ci-dessous: https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/

<input type="checkbox" id="check">
<a href="#" onclick="check()">click</a>
<button onclick="check()">button</button>
<script>
 function check() {
    		if (document.getElementById('check').checked) {
            alert("checked");
        } else {
            alert("Not checked.");
        }
       
    }

</script>

Divyesh
la source
3
    if (document.getElementById('remember').checked) {
        alert("checked");
    }
    else {
        alert("You didn't check it! Let me check it for you.");
    }
Lakshmana Kumar
la source
3

Cela devrait fonctionner

    function validate() {
        if ($('#remeber').is(':checked')) {
            alert("checked");
        } else {
            alert("You didn't check it! Let me check it for you.");
        }
    }
Aditya
la source
2

remembern'est pas défini ... et la checkedpropriété est un booléen et non un nombre.

function validate(){
    var remember = document.getElementById('remember');
    if (remember.checked){
        alert("checked") ;
    }else{
        alert("You didn't check it! Let me check it for you.")
    }
}
Quentin
la source
1

Vous pouvez essayer ceci:

if ($(#remember).is(':checked')){
   alert('checked');
}else{
   alert('not checked')
}
Donminick Bautista
la source
0

Utilisez ce code simple ci-dessous: https://jsfiddle.net/Divyesh_Patel/v7a4h3kr/7/

<input type="checkbox" id="check">
<a href="#" onclick="check()">click</a>
<button onclick="check()">
button
</button>
<script>
 function check() {
    		if (document.getElementById('check').checked) {
            alert("checked");
        } else {
            alert("You didn't check it! Let me check it for you.");
        }
       
    }

</script>

Divyesh
la source
-1

Essaye ça

<script type="text/javascript">
window.onload = function () {
    var input = document.querySelector('input[type=checkbox]');

    function check() {
        if (input.checked) {
            alert("checked");
        } else {
            alert("You didn't check it.");
        }
    }
    input.onchange = check;
    check();
}
</script>

la source
-1

Vous pouvez également utiliser les méthodes JQuery pour ce faire:

<script type="text/javascript">
if ($('#remember')[0].checked) 
{
 alert("checked");
}
</script>
Supriya
la source