How can I check if a checkbox is checked?

javascript jquery-mobile checkbox

967,511

Solution 1

checked is a boolean property, so you can directly use it in an 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>

Solution 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 the variable remember is. You need to get the element first using getElementById().

Solution 3

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

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

Solution 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" />

Solution 5

//HTML
<input type="checkbox" id="someID">

// JavaScript
const someCheckbox = document.getElementById('someID');

someCheckbox.addEventListener('change', e => {
  if(e.target.checked === true) {
    console.log("Checkbox is checked - boolean value: ", e.target.checked)
  }
if(e.target.checked === false) {
    console.log("Checkbox is not checked - boolean value: ", e.target.checked)
  }
});

know more

View more solutions

967,511

Steaphann

Updated on March 16, 2022

Comments

Steaphann over 2 years

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'

PeeHaa over 12 years

What is remember in this context: if (remember.checked == 1){???
Steaphann over 12 years

Later on it should remember email and password. It's for a login page
PeeHaa over 12 years

What I am trying to say is that remember is undefined in that context. Try console.log(remember);.
Mr Lister over 12 years

Which version of HTML are you using? It's not really XHTML, is it?
Antony almost 4 years

As @Steaphann mentioned in the edit, the code did not work because there are two elements with same id in the html. <div id="remember" data-role="fieldcontain"> and <input id="remember" name="remember" type="checkbox" onclick="validate()" />. None of the answers caught this issue.

jAndy over 12 years

You should also advice to strip that == 1. Its only working because of two errors. Actually the value is true or false, he should just using if( remeber.checked )
Steaphann over 12 years

I always get the message 'You didn't check it! Let me check it for you.'
Steaphann over 12 years

I always get the message 'You didn't check it! Let me check it for you.'
Steaphann over 12 years

I always get the message 'You didn't check it! Let me check it for you.'
Pranav over 12 years

Nope its working fine for me ; i am getting both alert messages.
Mr Lister over 12 years

@user1251632 WFM too. Can you edit your question and show what you have now? Perhaps you made a copy and paste error.
hkutluay over 12 years

document.getElementById('remember').checked == 1 was changed by me bfore your comment.. it may be the problem.
josh.thomson almost 10 years

@Steaphann Did you replace the word 'remember' with your checkbox id? ...oh, just noticed 2012 0.o ...p.s. you forgot the semi-colon after the 2nd alert statement
yves amsellem almost 9 years

is does not belong to the DOM element object
max kaplan over 8 years

.is() - is a jQuery function. .checked is javascript.
Mark Kramer over 7 years

..What if I don't want it to check it for me and I just want to see if it's checked or not?
kojow7 almost 5 years

@josh.thomson semi-colons are optional.
Tofandel about 3 years

Why does this have so many upvotes? Between the missing parenthesis and the mix between vanilla and jquery. The answer is terrible It's either $('#remember').is(':checked') or document.getElementById('remember').checked but mixing will never work
Dumber_Texan2 about 3 years

Worked for me! For whatever reason, I had problems with what should be so simple.
Dhiaa Shalabi almost 3 years

I recommend you to use attr onclick or use jQuery code.