How can I get a checkbox's value in jQuery?
18 Answers
To get the value of the Value attribute you can do something like this:
$("input[type='checkbox']").val();
Or if you have set a class
or id
for it, you can:
$('#check_id').val();
$('.check_class').val();
However this will return the same value whether it is checked or not, this can be confusing as it is different to the submitted form behaviour.
To check whether it is checked or not, do:
if ($('#check_id').is(":checked"))
{
// it is checked
}
![](../../users/profiles/2240243.webp)
- 2,801
- 22
- 38
- 47
![](../../users/profiles/139459.webp)
- 355,543
- 70
- 511
- 562
-
3What does the first example do if there are multiple checkboxes on the page? Btw, it can be written in a shorter way `$("input:checkbox")`. Also, there seems to be a typo in the class selector... – Jawa May 14 '10 at 13:36
-
1@Jawa: The first one was just an example to show the syntax and thanks for that typo. – Sarfraz May 14 '10 at 13:38
-
157If I try `$($0).val()` in Chrome, and untick the checkbox, the answer is "on" even though it is not ticked. But `$($0).is(":checked")` returns the right value. – Adrien Dec 12 '13 at 10:52
-
3@Jawa Per https://api.jquery.com/checkbox-selector/ `[type="checkbox"]` has better performance in modern browsers than `:checkbox`. – TrueWill Jun 22 '15 at 12:53
-
1**$("input[type='checkbox']").is(":checked");** will return true or false – Min2 Apr 24 '16 at 11:41
-
5Replace `$('#check_id').val();` to `$('#check_id').is(":checked");` return value true or false. – Matheus Miranda Jan 19 '17 at 00:15
-
**However this will return the same value whether it is checked or not** --- in my case i also always get **on** even when actually not checked. isn't it a bug? – Lei Yang Oct 24 '19 at 09:50
-
`However this will return the same value whether it is checked or not` - just shame =\ – Vasilii Suricov Apr 14 '20 at 22:38
-
this is my approach: $(this).is(':checked') ? $(this).val(1) : $(this).val(2); – absolutkarlos May 31 '20 at 13:36
Those 2 ways are working:
$('#checkbox').prop('checked')
$('#checkbox').is(':checked')
(thanks @mgsloan)
$('#test').click(function() {
alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />
![](../../users/profiles/731138.webp)
- 32,952
- 14
- 114
- 147
-
10
-
Thank you for your answer. This is a state-of-art answer with jQuery prop() function – Thomas.Benz Mar 25 '18 at 15:23
Try this small solution:
$("#some_id").attr("checked") ? 1 : 0;
or
$("#some_id").attr("checked") || 0;
![](../../users/profiles/1032750.webp)
- 4,475
- 2
- 18
- 27
The best way of retrieving a checkbox's value is as following
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
as explained in the official documentations in jQuery's website. The rest of the methods has nothing to do with the property of the checkbox, they are checking the attribute which means they are testing the initial state of the checkbox when it was loaded. So in short:
- When you have the element and you know it is a checkbox you can simply read its property and you won't need jQuery for that (i.e.
elem.checked
) or you can use$(elem).prop("checked")
if you want to rely on jQuery. - If you need to know (or compare) the value when the element was first loaded (i.e. the default value) the correct way to do it is
elem.getAttribute("checked")
orelem.prop("defaultChecked")
.
Please note that elem.attr("checked")
is modified only after version 1.6.1+ of jQuery to return the same result as elem.prop("checked")
.
Some answers are misleading or imprecise, Please check below yourself:
![](../../users/profiles/1716597.webp)
- 495
- 5
- 8
-
`.is(":checked")` and `.prop(":checked")` are working the same for me w/ jQuery 1.10.0 – Josh Nov 10 '17 at 19:05
-
@Josh, you are right thanks! I updated the answer to clarify for future readers. – Reza Aug 06 '20 at 09:24
Just to clarify things:
$('#checkbox_ID').is(":checked")
Will return 'true' or 'false'
![](../../users/profiles/3519759.webp)
- 481
- 4
- 9
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
![](../../users/profiles/1217713.webp)
- 8,156
- 1
- 48
- 37
-
-
10
-
`$('#checkbox_id').is(":checked");` returns a boolean, exactly what I needed. – Pedro Lobito Oct 01 '20 at 04:38
Simple but effective and assumes you know the checkbox will be found:
$("#some_id")[0].checked;
Gives true
/false
![](../../users/profiles/182468.webp)
- 853
- 7
- 12
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
Example
Demo
![](../../users/profiles/1093184.webp)
- 675
- 7
- 11
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});
![](../../users/profiles/1879888.webp)
- 2,071
- 2
- 14
- 27
Despite the fact that this question is asking for a jQuery solution, here is a pure JavaScript answer since nobody has mentioned it.
Without jQuery:
Simply select the element and access the checked
property (which returns a boolean).
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
Here is a quick example listening to the change
event:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
To select checked elements, use the :checked
pseudo class (input[type="checkbox"]:checked
).
Here is an example that iterates over checked input
elements and returns a mapped array of the checked element's names.
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
<div class="parent">
<input type="checkbox" name="name1" />
<input type="checkbox" name="name2" />
<input type="checkbox" name="name3" checked="checked" />
<input type="checkbox" name="name4" checked="checked" />
<input type="checkbox" name="name5" />
</div>
![](../../users/profiles/2680216.webp)
- 202,159
- 50
- 343
- 273
-
1
-
1@MichaelCole - I just reread the question (3 years later) and it looks like this does indeed answer the question, so feel free to elaborate. – Josh Crozier Jun 12 '18 at 20:30
-
1"How can I get a checkbox's value in jQuery?" -> "Despite the fact that this question is asking for a jQuery solution ... blah blah blah". It's a soap-box answer, in the way of other actual answers, and that's why I downvoted it. – Michael Cole Jun 14 '18 at 03:13
-
2@MichaelCole - Fair enough, feedback is always appreciated. The original intent of this answer was to indicate that jQuery can be avoided in trivial cases like this when the `checked` property is readily accessible on the native DOM element. Some of the people who search for questions/answers like these are generally unaware of the fact that jQuery isn't necessary at times. In other words, narrow-minded people are not the target demographic for this answer. – Josh Crozier Jun 14 '18 at 05:07
-
1@MichaelCole Disagree. If someone is trying to ask a complex solution, and a simpler alternative is available, it is our duty to also mention the simpler (and better?) solution. Upvoted. – Jaideep Shekhar Feb 17 '21 at 10:53
Here is how to get the value of all checked checkboxes as an array:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
![](../../users/profiles/530659.webp)
- 3,717
- 30
- 38
to get value of checked checkboxex in jquery
:
var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.
for(var i=0; i<checks.length; i++){
console.log($(checks[i]).val()); // or do what you want
});
in pure js
:
var checks = document.querySelectorAll("input[type='checkbox']:checked");
for(var i=0; i<checks.length; i++){
console.log(checks[i].value); // or do what you want
});
![](../../users/profiles/3415984.webp)
- 3,070
- 4
- 17
- 30
Use the following code:
$('input[name^=CheckBoxInput]').val();
![](../../users/profiles/6682274.webp)
- 3,009
- 2
- 11
- 23
![](../../users/profiles/4376392.webp)
- 209
- 3
- 8
$('.class[value=3]').prop('checked', true);
![](../../users/profiles/1402846.webp)
- 8,605
- 144
- 77
- 113
![](../../users/profiles/6720093.webp)
- 29
- 5
-
1The question is asking how to *get the value* not how to check something with a particular default value. – Quentin Jun 22 '19 at 11:44
<script type="text/javascript">
$(document).ready(function(){
$('.laravel').click(function(){
var val = $(this).is(":checked");
$('#category').submit();
});
});
<form action="{{route('directory')}}" method="post" id="category">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input name="category" value="{{$name->id}}" class="laravel" type="checkbox">{{$name->name}}
</form>
![](../../users/profiles/6694830.webp)
- 3,054
- 1
- 15
- 25
Just attention, as of today, 2018, due to api changing over the years. removeAttr are depricated, NOT working anymore!
Jquery Check or unCheck a checkbox:
Bad, not working any more.
$('#add_user_certificate_checkbox').removeAttr("checked");
$('#add_user_certificate_checkbox').attr("checked","checked");
Instead you should do:
$('#add_user_certificate_checkbox').prop('checked', true);
$('#add_user_certificate_checkbox').prop('checked', false);
![](../../users/profiles/3521515.webp)
- 3,560
- 1
- 26
- 28
Best way is $('input[name="line"]:checked').val()
And also you can get selected text $('input[name="line"]:checked').text()
Add value attribute and name to your radio button inputs. Make sure all inputs have same name attribute.
<div class="col-8 m-radio-inline">
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="1" checked> Value Text 1
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="2"> Value Text 2
</label>
<label class="m-radio m-radio-filter">
<input type="radio" name="line" value="3"> Value Text 3
</label>
</div>
![](../../users/profiles/3764697.webp)
- 246
- 5
- 13
$("input[name='gender']:checked").val();
this worked in my case, anyone looking for a simple way, must try this syntax. Thanks
![](../../users/profiles/9769916.webp)
- 247
- 2
- 15