How can I check if a checkbox is checked?

2019-01-01 00:34发布

问题:

I am building a mobile web app with jQuery Mobile and I want to check if a checkbox is checked. Here is my 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()\" />

But for some reason or another it doesn\'t execute it.

Please help !

----EDIT----- This is what I have for the 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>

----EDIT--

Solved it, the problem was that the fieldcontain was also named \'remember\'

回答1:

checked is boolean property so you can directly use it in IF condition:-

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


回答2:

try this:

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.\")
  }
}

Your script doesn\'t know what \"remember\" is. you need to get the element first using getElementById()



回答3:

This should allow you to check if element with id=\'remember\' is \'checked\'

if (document.getElementById(\'remember\').is(\':checked\')


回答4:

If you are using this form for mobile app then you may use the required attribute html5. you dont want to use any java script validation for this. It should work

<input id=\"remember\" name=\"remember\" type=\"checkbox\" required=\"required\" />


回答5:

use like this

<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()\" />


回答6:

remember is undefined … and the checked property is a boolean not a number.

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.\")
    }
}


回答7:

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


回答8:

I am using this and it works for me with Jquery:

Jquery:

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

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

Is very simple, but work\'s.

Regards!



回答9:

Try This

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


回答10:

You can also use JQuery methods to accomplish this:

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