Get checkbox value in jQuery

Question

How can I get a checkbox s value in jQuery

User · Answer

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

User · Answer

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     x000D   x000D  var checkbox   document querySelector  input type  checkbox      x000D   x000D  alert checkbox checked   x000D   lt input type  checkbox   gt  x000D   x000D   x000D      Here is a quick example listening to the change event    x000D   x000D  var checkbox   document querySelector  input type  checkbox      x000D  checkbox addEventListener  change   function  e    x000D      alert this checked   x000D      x000D   lt input type  checkbox   gt  x000D   x000D   x000D      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      x000D   x000D  var elements   document querySelectorAll  input type  checkbox   checked    x000D  var checkedElements   Array prototype map call elements  function  el  i    x000D      return el name  x000D      x000D   x000D  console log checkedElements   x000D   lt div class  parent  gt  x000D       lt input type  checkbox  name  name1    gt  x000D       lt input type  checkbox  name  name2    gt  x000D       lt input type  checkbox  name  name3  checked  checked    gt  x000D       lt input type  checkbox  name  name4  checked  checked    gt  x000D       lt input type  checkbox  name  name5    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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     lt div class  col-8 m-radio-inline  gt       lt label class  m-radio m-radio-filter  gt           lt input type  radio  name  line  value  1  checked gt  Value Text 1      lt  label gt       lt label class  m-radio m-radio-filter  gt           lt input type  radio  name  line  value  2  gt  Value Text 2      lt  label gt       lt label class  m-radio m-radio-filter  gt           lt input type  radio  name  line  value  3  gt  Value Text 3      lt  label gt   lt  div gt

User · Answer

to get value of checked checkboxex in jquery   var checks      input type  checkbox   checked       returns object of checkeds   for var i 0  i lt 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 lt checks length  i         console log checks i  value      or do what you want

User · Answer

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

User · Answer

checkbox id   val        checkbox id   is   checked        checkbox id checked   val

User · Answer

class value 3    prop  checked   true

User · Answer

lt script type  text javascript  gt    document  ready function            laravel   click function            var val     this  is   checked                category   submit                     lt form action    route  directory      method  post  id  category  gt                           lt input type  hidden  name   token  value     csrf token       gt                           lt input name  category  value     name- gt id     class  laravel  type  checkbox  gt    name- gt name                          lt  form gt

User · Answer

Just to clarify things       checkbox ID   is   checked     Will return  true  or  false

User · Answer

Those 2 ways are working        checkbox   prop  checked       checkbox   is   checked    thanks  mgsloan     x000D   x000D      test   click function     x000D      alert  Checkbox state  method 1            test   prop  checked     x000D      alert  Checkbox state  method 2            test   is   checked     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D  Check me   lt input id  test  type  checkbox    gt  x000D   x000D   x000D

User · Answer

Use the following code      input name  CheckBoxInput    val

User · Answer

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    lt input type  checkbox  value  cricket  name  hobbies     class  hobbies class  gt Cricket     lt input type  checkbox  value  hockey  name  hobbies    class  hobbies class  gt Hockey   Example    Demo

User · Answer

Try this small solution        some id   attr  checked     1   0    or      some id   attr  checked      0

User · Answer

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

User · Answer

Simple but effective and assumes you know the checkbox will be found       some id   0  checked    Gives true false

User · Answer

jQuery   checkboxClass   click function            var selectedCountry   new Array            var n   jQuery   checkboxClass checked   length          if  n  gt  0               jQuery   checkboxClass checked   each function                    selectedCountry push   this  val                                       alert selectedCountry

User · Answer

The best way of retrieving a checkbox s value is as following if   elem checked    if      elem   prop   quot checked quot       if      elem   is   quot  checked quot        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  quot checked quot   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  quot checked quot   or elem prop  quot defaultChecked quot     Please note that elem attr  quot checked quot   is modified only after version 1 6 1  of jQuery to return the same result as elem prop  quot checked quot    Some answers are misleading or imprecise  Please check below yourself  http   api jquery com prop

[jquery] Get checkbox value in jQuery

Examples related to jquery

Examples related to html

Examples related to forms

Examples related to checkbox