Checkbox value always returns "on"?

Question

I'm trying to return the value of a checkbox to enable and disable a button. Making the checkbox is not a problem, the problem is the check box value always returns on. How should I get a value indicating if the checkbox is checked?

HTML:

<form>
    <input type="checkbox" id="checkbox" /> <label>Do you agree  </label><br />
    <input type="button" value="Continue" id="button" disabled="disabled" />
</form>

Javascript:

$('#checkbox').change(function(){
    var checkboxValue = $(this).val();
    alert(checkboxValue);
});

Similar question here http://stackoverflow.com/questions/4813219/jquery-checkbox-value, use .is(':checked') — EvilEpidemic, May 17 '13 at 14:38
Everyone knows how to get the value but nobody has mentioned why it returns `on`. That confused that tar out of me, too. — bgmCoder, Jan 21 '16 at 21:04

score 58 · Accepted Answer · answered May 17 '13 at 14:38

58

Try using prop('checked');

var checkboxValue = $(this).prop('checked');

answered May 17 '13 at 14:38

Maxim Kumpan

2,545
2
19
23

@gdoron, We're using jQuery. How is prop('checked') not valid and/or inferior? – Maxim Kumpan May 17 '13 at 14:42
1

@gdoron if you already have the jQuery framework loaded, why not use it? The overhead will be minimal and it will keep the code consistent in my opinion. Further, should you encounter a future browser that doens't support this.checked (for some bizzare reason), you could expect a framework update to handle this for you. All IMHO. – RemarkLima May 17 '13 at 14:44
1

@mkumpan, The same as why `$('selector').each(function(){$(this).css('display', 'block');})` is bad, yes it does the job but you could have done it simply with `$('selector').show()` – gdoron May 17 '13 at 14:44
@MohamedSamir, you probably misspelled `checked` or used it in a bad context. – gdoron May 17 '13 at 14:46
1

@gdoron, let's not be mixing mice and elephants here. As RemarkLima mentioned, I was gunning for code consistency. The framework flexibility remark is also quite valid, albeit much less likely to fire. – Maxim Kumpan May 17 '13 at 14:53
for me this always returns undefined – Seth Schaffner Aug 24 '22 at 23:40

score 9 · Answer 2 · answered May 17 '13 at 14:38

9

It seems that you need checked

var checkboxValue = this.checked;

answered May 17 '13 at 14:38

gdoron

147,333
58
291
367

score 2 · Answer 3 · edited Feb 02 '18 at 21:48

2

A couple of things is going on here

the check box as is does not have a value
you should be checking to see if its checked or not

try this

$('#checkBox').prop('checked');

if its checked you should get back true and false if its not checked.

edited Feb 02 '18 at 21:48

Mazdak

105,000
18
159
188

answered May 17 '13 at 14:44

Shardayyy

97
1
7

score 1 · Answer 4 · answered May 17 '13 at 14:39

1

Trying using (If you're using jQuery 1.6+):

var checkboxValue = $(this).prop('checked');

http://api.jquery.com/prop/

This should return a true or false correctly.

answered May 17 '13 at 14:39

RemarkLima

11,639
7
37
56

@gdoron if you already have the jQuery framework loaded, why not use it? The overhead will be minimal and it will keep the code consistent in my opinion. Further, should you encounter a future browser that doens't support `this.checked` (for some bizzare reason), you could expect a framework update to handle this for you. All IMHO. – RemarkLima May 17 '13 at 14:43
`prop('checked')` will use `this.checked` so if it doesn't work, so as jQuery. and how exactly writing more makes you code better? jquery shouldn't be replacing vanilla js. – gdoron May 17 '13 at 14:47
1

@gdoron I disagree, but that's the joys of a free world right? Personally I'm of the opinion, if you're going to use a framework, use it as much as possible simply for consistency. A better method of `this.checked` could appear, and you then have to refactor all your code. Or just change the framework to suit. No? – RemarkLima May 17 '13 at 16:55

score 1 · Answer 5 · answered May 17 '13 at 14:40

1

Or what about making use of the :checked Selector?

$(this).is(':checked') // returns true if checked and false otherwise

answered May 17 '13 at 14:40

Petr Vostrel

2,324
16
23

score 0 · Answer 6 · edited May 23 '17 at 12:09

0

Try using is(':checked') instead of .val

$('#checkbox').change(function(){
    var checkboxValue = $(this).is(':checked');
    alert(checkboxValue);
});

It returns true or false

See also jQuery val() and checkboxes

edited May 23 '17 at 12:09

Community

1
1

answered May 17 '13 at 14:40

Rick

153
2
10

score 0 · Answer 7 · answered Feb 14 '17 at 23:35

0

Here is a code to do this, no jquery, based off of @gdoron's answer.

document.getElementById("checkbox").addEventListener("change", function() {
    if (this.checked) {
        //Whatever u want to do if checked
    }
    else {
        //Whatever u want to do if not checked
    }
})

Try checking/unchecking the checkbox in the below snippet to see this in action...

document.getElementById("checkbox").addEventListener("change", function() {
        if (this.checked) {
            //Whatever u want to do if checked
            alert("u check");
        }
        else {
            //Whatever u want to do if not checked
            alert("u uncheck");
        }
    })

<input type="checkbox" id="checkbox" />Coconuts?

answered Feb 14 '17 at 23:35

Cannicide

4,360
3
22
42

The problem with your checkbox is that "value" returns whether or not the input is disabled/active/being used. To get what you want, you must use `.checked` or `.prop('checked')` instead. Both of these return true/false. I recommend using `.checked`, but use what is easiest for you. – Cannicide Feb 14 '17 at 23:39
Also by the way, for users who already have jquery loaded `.prop('checked')` is easiest as it is already included in jquery and fully cross-browser. `.checked` is just for those who don't want to use jquery... – Cannicide Feb 14 '17 at 23:45

Checkbox value always returns "on"?

7 Answers7