How can I check if a checkbox is checked?

Question

I am building a web app with jQuery Mobile and want to check if a checkbox is checked:

<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 it doesn't execute it. This is what I have now:

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

What is remember in this context: if (remember.checked == 1){??? — PeeHaa
– PeeHaa, Commented Mar 27, 2012 at 10:05
Later on it should remember email and password. It's for a login page — Steaphann
– Steaphann, Commented Mar 27, 2012 at 10:14
What I am trying to say is that remember is undefined in that context. Try console.log(remember);. — PeeHaa
– PeeHaa, Commented Mar 27, 2012 at 10:17
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. — HelloWorld101
– HelloWorld101, Commented Aug 5, 2020 at 8:08
@Steaphann Do not include solution to question please (post a separate answer instead). — user4157124
– user4157124, Commented Jun 12 at 10:14

Agostino · Accepted Answer · 2021-09-21 10:09:38Z

461

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>

edited Sep 21, 2021 at 10:09

Agostino

2,80110 gold badges54 silver badges69 bronze badges

answered Mar 27, 2012 at 10:09

Pranav

8,9214 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steaphann Over a year ago

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

Pranav Over a year ago

Nope its working fine for me ; i am getting both alert messages.

josh.thomson Over a year ago

@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

kojow7 Over a year ago

@josh.thomson semi-colons are optional.

Matt Oct 16 at 18:24

Note to the unwary: don't confuse someElem.checked with someElem.value. someElem.checked returns a boolean telling you if the box is checked or not. someElem.value is the string value that will be sent to the server if the box is checked. Using javascript to get someElem.value will return the same thing ('on', by default) regardless of whether the box is checked.

Newbyte · Accepted Answer · 2019-01-02 12:08:42Z

92

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().

edited Jan 2, 2019 at 12:08

Newbyte

3,9576 gold badges29 silver badges56 bronze badges

answered Mar 27, 2012 at 10:05

clem

3,3661 gold badge24 silver badges33 bronze badges

2 Comments

jAndy Over a year ago

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 a year ago

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

Crave · Accepted Answer · 2021-09-24 10:41:08Z

24

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

edited Sep 24, 2021 at 10:41

Crave

1753 silver badges15 bronze badges

answered Apr 16, 2021 at 9:01

MD SHAYON

8,11156 silver badges43 bronze badges

Comments

Douwe de Haan · Accepted Answer · 2022-03-16 08:00:31Z

10

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

edited Mar 16, 2022 at 8:00

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered Mar 27, 2012 at 10:06

hkutluay

6,9742 gold badges37 silver badges57 bronze badges

3 Comments

Steaphann Over a year ago

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

Mr Lister Over a year ago

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

hkutluay Over a year ago

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

Luke · Accepted Answer · 2012-06-08 10:49:50Z

9

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

edited Jun 8, 2012 at 10:49

Luke

11.5k43 gold badges63 silver badges70 bronze badges

answered Jun 8, 2012 at 10:06

shenbaga kannan

911 silver badge3 bronze badges

Comments

Douwe de Haan · Accepted Answer · 2022-03-16 08:01:43Z

9

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

edited Mar 16, 2022 at 8:01

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered May 15, 2013 at 10:14

Lakshmana Kumar

1,2593 gold badges17 silver badges34 bronze badges

Comments

Douwe de Haan · Accepted Answer · 2022-03-16 08:00:54Z

7

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>

edited Mar 16, 2022 at 8:00

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered Oct 16, 2019 at 4:41

Divyesh

1612 silver badges8 bronze badges

Comments

Douwe de Haan · Accepted Answer · 2022-03-16 08:01:11Z

6

This should work

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

edited Mar 16, 2022 at 8:01

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered Apr 20, 2020 at 11:15

Aditya

1512 silver badges12 bronze badges

Comments

Douwe de Haan · Accepted Answer · 2022-03-16 08:02:09Z

6

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("You didn't check it! Let me check it for you.");
    }

  }
</script>

edited Mar 16, 2022 at 8:02

Douwe de Haan

6,7263 gold badges35 silver badges53 bronze badges

answered Oct 16, 2019 at 4:37

Divyesh

1612 silver badges8 bronze badges

Comments

Radames E. Hernandez · Accepted Answer · 2018-06-13 18:18:09Z

5

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!

answered Jun 13, 2018 at 18:18

Radames E. Hernandez

4,45531 silver badges38 bronze badges

Comments

jeffkmeng · Accepted Answer · 2023-08-26 14:57:11Z

5

This should allow you to determine if an element with id='remember' is 'checked':

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

edited Aug 26, 2023 at 14:57

jeffkmeng

8791 gold badge9 silver badges31 bronze badges

answered Jul 25, 2014 at 11:07

Peter

2272 silver badges2 bronze badges

3 Comments

yves amsellem Over a year ago

is does not belong to the DOM element object

max kaplan Over a year ago

.is() - is a jQuery function. .checked is javascript.

Tofandel Over a year ago

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

Quentin · Accepted Answer · 2012-03-27 10:07:21Z

3

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

answered Mar 27, 2012 at 10:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Dhia Shalabi · Accepted Answer · 2021-08-31 12:40:02Z

2

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

OR

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>

edited Aug 31, 2021 at 12:40

answered Aug 31, 2021 at 12:14

Dhia Shalabi

1,5672 gold badges16 silver badges33 bronze badges

1 Comment

Dhia Shalabi Over a year ago

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

user13992078 · Accepted Answer · 2021-04-16 09:22:34Z

1

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

answered Apr 16, 2021 at 9:22

user13992078

Comments

Radames E. Hernandez · Accepted Answer · 2021-04-21 13:48:03Z

1

You can try this:

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

edited Apr 21, 2021 at 13:48

Radames E. Hernandez

4,45531 silver badges38 bronze badges

answered Oct 9, 2019 at 2:45

Donminick Bautista

344 bronze badges

Comments

user2533777 · Accepted Answer · 2013-10-18 07:26:50Z

-1

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>

answered Oct 18, 2013 at 7:26

user2533777

Comments

Jesse · Accepted Answer · 2018-05-11 13:11:16Z

-1

You can also use JQuery methods to accomplish this:

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

edited May 11, 2018 at 13:11

Jesse

3,6626 gold badges28 silver badges42 bronze badges

answered May 11, 2018 at 12:12

Supriya

111 bronze badge

Comments

Dennis · Accepted Answer · 2022-09-08 14:20:11Z

-4

The below will definitely work. updated 2022

<input onchange="isChecked()" type="checkbox" required="required"/>

<script type="text/javascript">
        let ischeckvariable = false;
    function isChecked() {
        if (!ischeckvariable) {
            ischeckvariable = true;
        } else {
            isckeckvariable = false;
        }
    }
</script>

answered Sep 8, 2022 at 14:20

Dennis

1774 bronze badges

Collectives™ on Stack Overflow

How can I check if a checkbox is checked?

18 Answers 18

5 Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

5 Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Related