CODEWITHSUNDEEP
jqueryhtmlformscheckbox
maztt
maztt

Reputation: 12294

Get checkbox value in jQuery

How can I get a checkbox's value in jQuery?

Upvotes: 723

Views: 1772714

Answers (21)

Reza
Reza

Reputation: 740

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 other methods have nothing to do with the value of the checked property of the checkbox, they are checking the attribute. In other words, they are testing the initial state of the checkbox when the page was loaded. So in short:

  • When you have the element and you know it is a checkbox you can simply read its property. You don't even 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 with) the value when the element was first loaded (i.e. the default value) the correct way to do this, is elem.getAttribute("checked") or elem.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:

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

Upvotes: 57

Sarfraz
Sarfraz

Reputation: 382616

To check whether it is checked or not, do:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

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.

Upvotes: 1386

Du-Lacoste
Du-Lacoste

Reputation: 12757

You could use the following. It is tested working OK.

$('#checkbox_id').is(":checked"); // jQuery

if checkbox is checked this will return true and vice versa.

This below code fragment is for anyone trying to do the same in JavaScript.

document.getElementById("checkbox_id").checked //JavaScript

return true if checkbox is checked

Upvotes: 5

Franc Jerez
Franc Jerez

Reputation: 163

If only one child is expected to be selected:

form.querySelector(":checked").value

Upvotes: 0

Tahir Afridi
Tahir Afridi

Reputation: 200

For more than 1 checkbox always use named array as show in the below example with countries, as you know countries can be selected multiple so I used name="countries[]" and while checking checkboxes you have to reference it by name as shown in below example

var selectedCountries = ["Pakistan", "USA"];

$(document).ready(function () {
  $.each(selectedCountries, function (index, country) {
    $(`input[name='countries[]'][value='${country}']`).attr('checked', 'checked');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  <input type="checkbox" name="countries[]" value="Pakistan">
  Pakistan
</p>
<p>
  <input type="checkbox" name="countries[]" value="India">
  India
</p>
<p>
  <input type="checkbox" name="countries[]" value="USA">
  USA
</p>

Upvotes: 0

Tayyab Hayat
Tayyab Hayat

Reputation: 923

$("input[name='gender']:checked").val();

this worked in my case, anyone looking for a simple way, must try this syntax. Thanks

Upvotes: 7

Hayrullah Cansu
Hayrullah Cansu

Reputation: 262

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>

Upvotes: 0

ttrasn
ttrasn

Reputation: 4826

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

Upvotes: 2

Jacksonit.org
Jacksonit.org

Reputation: 27

$('.class[value=3]').prop('checked', true);

Upvotes: 0

Myint Thu Lwin
Myint Thu Lwin

Reputation: 239

Use the following code:

$('input[name^=CheckBoxInput]').val();

Upvotes: 2

hoogw
hoogw

Reputation: 5525

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

Upvotes: -1

Kuldeep Mishra
Kuldeep Mishra

Reputation: 4040

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

Upvotes: -1

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10562

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

Upvotes: 22

Kamal
Kamal

Reputation: 794

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

Upvotes: 17

Kevin Shea
Kevin Shea

Reputation: 920

Simple but effective and assumes you know the checkbox will be found:

$("#some_id")[0].checked;

Gives true/false

Upvotes: 19

Faraz Kelhini
Faraz Kelhini

Reputation: 3985

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;
            })()

Upvotes: 3

Greg A
Greg A

Reputation: 531

Just to clarify things:

$('#checkbox_ID').is(":checked")

Will return 'true' or 'false'

Upvotes: 29

Josh Crozier
Josh Crozier

Reputation: 240858

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.

Example Here

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>

Upvotes: 6

Alain
Alain

Reputation: 36944

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

Upvotes: 298

RDK
RDK

Reputation: 4560

Try this small solution: 

$("#some_id").attr("checked") ? 1 : 0;

or

$("#some_id").attr("checked") || 0;

Upvotes: 68

Jaskaran singh Rajal
Jaskaran singh Rajal

Reputation: 2330

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

Upvotes: 11

Related Questions