How can I check if a checkbox is checked?

Javascript Problem Overview

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'

Javascript Solutions

Solution 1 - Javascript

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

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

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

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

Solution 4 - Javascript

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

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

Solution 6 - Javascript

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

Solution 7 - Javascript

Use this below simple code: 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>

Solution 8 - Javascript

This should work

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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!

Solution 11 - Javascript

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

Solution 12 - Javascript

The remember variable is undefined. so try this way:

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

Solution 13 - Javascript

You can use this simple and effective code using pure JS and jQuery.

using validate function as onclick attr

function validate(el) {
    if (el.checked) {
        alert("checked")
    } else {
        alert("unchecked")
    }
}

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

using pure JS

document.addEventListener("DOMContentLoaded", function(event) { 
    //using pure Js code
    let chk = document.getElementById("remember");
    if (chk.checked) {
        alert("checked")
    }else{
        alert("unchecked")
    }
})

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

using jQuery

$(document).ready(function () {
    //using jQuery code
    $('#remember').on('change', function (e) {
        if (e.currentTarget.checked) {
            alert("checked")
        } else {
            alert("unchecked")
        }
    })
})

<input id="remember" name="remember" type="checkbox"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Solution 14 - Javascript

You can try this:

if ($('#remember').is(':checked')){
   alert('checked');
}else{
   alert('not checked')
}

Solution 15 - Javascript