Geek asks and answers

Get checkbox value in jQuery

How can I get the checkbox value in jQuery?

+449
source share
16 answers

To get the value of the Value attribute, you can do something like this:

$("input[type='checkbox']").val();

Or, if you installed classor idfor it, you can:

$('#check_id').val();
$('.check_class').val();

However, it will return one and the same value regardless of whether it is marked or not, it can be confusing, as it differs from the behavior represented by the shape.

To check if this is checked or not, do:

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

These two methods work:

  • $('#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" />
Run codeHide result
+189
source

:

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


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

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) )

- jQuery. , , , . :

  • , , , , jQuery (.. elem.checked), $(elem).prop("checked"), jQuery.
  • ( ) , (.. ), - $(elem).is(":checked").

, :

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

+28

:

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

'true' 'false'

+14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
+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);
    });
+10

, , , :

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

true/false

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


+6

, jQuery, JavaScript, .

jQuery:

checked property ( ).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>
Hide result

change:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>
Hide result

, :checked (input[type="checkbox"]:checked).

, input .

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>
Hide result
+6

:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()
+2

:

$('input[name^=CheckBoxInput]').val();
+1
$('.class[value=3]').prop('checked', true);
+1
<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>
0

Just attention, for today, 2018, due to the fact that api changes over the years. removeAttr deprived, no longer work!

JQuery Check or unCheck a:

Bad, not working.

   $('#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);
0
source

Besides jQuery, you can do this using JavaScript to call an element event:

<input onchange="handlecheckbox(this)" type="checkbox">

<script>
   function handlecheckbox(el) {
         alert(el.checked)
   }
</script>
0
source

More articles:


All Articles