Testing if a checkbox is checked with jQuery

Question

If the checkbox is checked, then I only need to get the value as 1; otherwise, I need to get it as 0. How do I do this using jQuery?

$("#ans").val() will always give me one right in this case:

<input type="checkbox" id="ans" value="1" />

.val() is to get the value attribute, not the check status. The value attribute can be anything, it doesn't need to be boolean. — Pablo Pazos, Nov 16 '16 at 04:07
if you're still around, you may want to update the accepted answer for modern software... a lot of people still see this question — xaxxon, Mar 25 '18 at 03:55
Possible duplicate of [How to check whether a checkbox is checked in jQuery?](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — Laurent S., Feb 14 '19 at 15:30

Andy Mikula · Accepted Answer · 2016-03-17T14:38:42.913

1013

Use .is(':checked') to determine whether or not it's checked, and then set your value accordingly.

More information here.

edited Mar 17 '16 at 14:38

answered Jan 27 '11 at 06:03

Andy Mikula

16,796
4
32
39

1

In addition, when you do $("#id").is("checked") in a if clause you'll get true or false, not on/off, by return and you can send it to your back-end script and do whatever you want. – Zanoldor Feb 15 '17 at 12:33
1

Probably this doesn't matter nowadays: ReSharper (I guess) outputs a warning "**The pseudo-class 'checked' is not compatible with Internet Explorer 8.0**". – Uwe Keim Feb 27 '17 at 22:31

xaxxon · Answer 2 · 2013-08-28T20:20:08.297

213

$("#ans").attr('checked')

will tell you if it's checked. You can also use a second parameter true/false to check/uncheck the checkbox.

$("#ans").attr('checked', true);

Per comment, use prop instead of attr when available. E.g:

$("#ans").prop('checked')

edited Aug 28 '13 at 20:20

answered Jan 27 '11 at 06:05

xaxxon

19,189
5
50
80

SimionBaws · Answer 3 · 2012-05-09T13:13:52.803

90

Just use $(selector).is(':checked')

It returns a boolean value.

edited May 09 '12 at 13:13

answered May 09 '12 at 11:47

SimionBaws

941
6
4

score 57 · Answer 4 · answered Apr 16 '13 at 15:31

57

// use ternary operators
$("#ans").is(':checked') ? 1 : 0;

answered Apr 16 '13 at 15:31

Stefan Brinkmann

965
8
11

@Loic to set his value using the terse ternary syntax, eg: : a = ischecked ? 1 : 0 – Jul 29 '16 at 12:32

score 24 · Answer 5 · edited May 20 '22 at 18:50

24

@StefanBrinkmann's answer is excellent, but incomplete for beginners (omits the variable assignment). Just to clarify:

// this structure is called a ternary operator
var cbAns = ( $("#ans").is(':checked') ) ? 1 : 0;

It works like this:

 var myVar = ( if test goes here ) ? 'ans if yes' : 'ans if no' ;

Example:

var myMath = ( 1 > 2 ) ? 'yes' : 'no' ;
alert( myMath );

Alerts 'no'

edited May 20 '22 at 18:50

codewario

19,553
20
90
159

answered Jan 30 '15 at 16:31

crashwap

2,846
3
28
62

MAnoj Sarnaik · Answer 6 · 2017-07-18T14:15:54.727

18

You can try this:

$('#studentTypeCheck').is(":checked");

edited Jul 18 '17 at 14:15

answered Aug 08 '15 at 11:39

MAnoj Sarnaik

1,592
16
16

score 15 · Answer 7 · answered Jul 05 '12 at 08:22

15

I've found the same problem before, hope this solution can help you. first, add a custom attribute to your checkboxes:

<input type="checkbox" id="ans" value="1" data-unchecked="0" />

write a jQuery extension to get value:

$.fn.realVal = function(){
    var $obj = $(this);
    var val = $obj.val();
    var type = $obj.attr('type');
    if (type && type==='checkbox') {
        var un_val = $obj.attr('data-unchecked');
        if (typeof un_val==='undefined') un_val = '';
        return $obj.prop('checked') ? val : un_val;
    } else {
        return val;
    }
};

use code to get check-box value:

$('#ans').realVal();

you can test here

answered Jul 05 '12 at 08:22

alphakevin

515
3
11

10

...because jQuery is known as "the write more do less" library – myshadowself Nov 13 '13 at 11:24
long story you have gone to far JQUERY want developer to write less and do extra more. simple problem deserve simple solution – ShapCyber Jul 01 '15 at 21:07
yes, agreed, write less, do more. you write the extension once, and for the rest of time, you only call the API $(someradio).realVal(), you don't need write a extension many times. – alphakevin Jun 12 '16 at 09:08
You didn't even need to write the extension once, nevermind 'many times'! O.o – Coz May 03 '17 at 15:38

score 8 · Answer 8 · answered Aug 28 '13 at 07:42

8

$('input:checkbox:checked').val();        // get the value from a checked checkbox

answered Aug 28 '13 at 07:42

nobody

223
4
5

score 8 · Answer 9 · answered Feb 14 '14 at 04:53

8

<input type="checkbox" id="ans" value="1" />

Jquery : var test= $("#ans").is(':checked') and it return true or false.

In your function:

$test =($request->get ( 'test' )== "true")? '1' : '0';

answered Feb 14 '14 at 04:53

Rajesh RK

93
1
4

score 6 · Answer 10 · edited Jun 11 '12 at 22:44

6

You can also use:

$("#ans:checked").length == 1;

edited Jun 11 '12 at 22:44

Mariusz Jamro

30,615
24
120
162

answered Aug 08 '11 at 04:53

Fareed Alnamrouti

30,771
4
85
76

kmoney12 · Answer 11 · 2012-12-03T21:14:11.037

4

function chkb(bool){
if(bool)
return 1;
return 0;
}

var statusNum=chkb($("#ans").is(':checked'));

statusNum will equal 1 if the checkbox is checked, and 0 if it is not.

EDIT: You could add the DOM to the function as well.

function chkb(el){
if(el.is(':checked'))
return 1;
return 0;
}

var statusNum=chkb($("#ans"));

edited Dec 03 '12 at 21:14

answered Sep 17 '12 at 21:45

kmoney12

4,413
5
37
59

score 4 · Answer 12 · answered Jan 28 '16 at 12:22

I've came through a case recently where I've needed check value of checkbox when user clicked on button. The only proper way to do so is to use prop() attribute.

var ansValue = $("#ans").prop('checked') ? $("#ans").val() : 0;

this worked in my case maybe someone will need it.

When I've tried .attr(':checked') it returned checked but I wanted boolean value and .val() returned value of attribute value.

Amit Maru · Answer 13 · 2016-10-07T05:50:49.163

4

There are Several options are there like....

 1. $("#ans").is(':checked') 
 2. $("#ans:checked")
 3. $('input:checkbox:checked');

If all these option return true then you can set value accourdingly.

edited Oct 07 '16 at 05:50

answered Sep 19 '16 at 09:27

Amit Maru

132
7

The first one should be (':checked'), doesn't work otherwise. – Arie Livshin Oct 05 '16 at 11:18

score 4 · Answer 14 · edited Nov 03 '11 at 18:52

4

Use:

$("#ans option:selected").val()

edited Nov 03 '11 at 18:52

Amanda S

3,266
4
33
45

answered Jan 27 '11 at 06:05

Senthil Kumar Bhaskaran

7,371
9
43
56

if it's not selected, then the first part wouldn't return anything, right? – xaxxon Jan 27 '11 at 06:06
@Senthil, OP is not asking to get the value of a selected checkbox, rather `return` `1` if it is selected – Om Shankar Jul 29 '12 at 15:51

score 2 · Answer 15 · edited Mar 22 '18 at 16:19

2

Try this

$('input:checkbox:checked').click(function(){
    var val=(this).val(); // it will get value from checked checkbox;
})

Here flag is true if checked otherwise false

var flag=$('#ans').attr('checked');

Again this will make cheked

$('#ans').attr('checked',true);

edited Mar 22 '18 at 16:19

Dwhitz

1,250
7
26
38

answered Feb 22 '13 at 06:58

sharif2008

2,716
3
20
34

score 2 · Answer 16 · answered Sep 25 '18 at 16:25

2

 $("#id").prop('checked') === true ? 1 : 0;

answered Sep 25 '18 at 16:25

score 0 · Answer 17 · answered Aug 15 '16 at 11:31

0

You can get value (true/false) by these two method

$("input[type='checkbox']").prop("checked");
$("input[type='checkbox']").is(":checked");

answered Aug 15 '16 at 11:31

PPB

2,937
3
17
12

score 0 · Answer 18 · edited Dec 17 '18 at 08:14

0

If you want integer value of checked or not, try:

$("#ans:checked").length

edited Dec 17 '18 at 08:14

Pang

9,564
146
81
122

answered Nov 14 '16 at 12:40

Nasaralla

1,839
13
11

score 0 · Answer 19 · answered May 07 '18 at 12:25

0

First check the value is checked

$("#ans").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
    var id = $(this).val()
    }
});

Else set the 0 value

answered May 07 '18 at 12:25

Ashok Charu

274
2
23

score 0 · Answer 20 · edited Dec 17 '18 at 08:52

0

You can perform it, this way:

$('input[id=ans]').is(':checked');

edited Dec 17 '18 at 08:52

Bsquare ℬℬ

4,423
11
24
44

answered Jul 27 '18 at 11:49

swathi

97
1
2

score 0 · Answer 21 · answered Apr 22 '22 at 15:36

I found the following worked for me, with a mix of one of the answers, but with if statement.

$('#checkbox').on('change', function () {
 let checkbox_true;
  checkbox_true = $('#checkbox').prop("checked") ? 1 : 0 ;
   if (checkbox_true === 1) {
     alert('Yes');
   } else {
     alert('no');
   }
})

Testing if a checkbox is checked with jQuery

21 Answers21

Linked