use jQuery to get values of selected checkboxes

Question

I want to loop through the checkboxgroup  locationthemes  and build a string with all selected values  So when checkbox 2 and 4 are selected the result would be   3 8    lt input type  checkbox  name  locationthemes  id  checkbox-1  value  2  class  custom    gt   lt label for  checkbox-1  gt Castle lt  label gt   lt input type  checkbox  name  locationthemes  id  checkbox-2  value  3  class  custom    gt   lt label for  checkbox-2  gt Barn lt  label gt   lt input type  checkbox  name  locationthemes  id  checkbox-3  value  5  class  custom    gt   lt label for  checkbox-3  gt Restaurant lt  label gt   lt input type  checkbox  name  locationthemes  id  checkbox-4  value  8  class  custom    gt   lt label for  checkbox-4  gt Bar lt  label gt    I checked here  http   api jquery com checked-selector  but there s no example how to select a checkboxgroup by its name   How can I do this

User · Answer

input checkbox name locationthemes  checked   each function            add   this  val   to your array       Working Demo   OR   Use jQuery s is   function      input checkbox name locationthemes    each function              if   this  is   checked          alert   this  val

User · Answer

Source - More Detail  Get Selected Checkboxes Value Using jQuery  Then we write jQuery script to get selected checkbox value in an array using jQuery each    Using this jQuery function it runs a loop to get the checked value and put it into an array       lt  DOCTYPE html gt       lt html lang  en  gt       lt head gt       lt meta charset  utf-8  gt       lt title gt Get Selected Checkboxes Value Using jQuery lt  title gt       lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                     btn   click function                     var locationthemes                         each    input name  locationthemes   checked    function                         locationthemes push   this  val                                         alert  My location themes colors are      locationthemes join                                          lt  script gt       lt  head gt       lt body gt           lt form method  POST  gt           lt h3 gt Select your location themes  lt  h3 gt           lt input type  checkbox  name  locationthemes  id  checkbox-1  value  2  class  custom    gt           lt label for  checkbox-1  gt Castle lt  label gt           lt input type  checkbox  name  locationthemes  id  checkbox-2  value  3  class  custom    gt           lt label for  checkbox-2  gt Barn lt  label gt           lt input type  checkbox  name  locationthemes  id  checkbox-3  value  5  class  custom    gt           lt label for  checkbox-3  gt Restaurant lt  label gt           lt input type  checkbox  name  locationthemes  id  checkbox-4  value  8  class  custom    gt           lt label for  checkbox-4  gt Bar lt  label gt           lt br gt           lt button type  button  class  btn  gt Get Values lt  button gt       lt  form gt       lt  body gt       lt  html gt

User · Answer

var SlectedList   new Array       input yorcheckboxclass checked   each function          SlectedList push   this  val

User · Answer

locationthemes   prop  checked

User · Answer

Using jquery s map function  var checkboxValues          input name checkboxName  checked   map function                 checkboxValues push   this  val

User · Answer

So all in one line   var checkedItemsAsString       id   checkbox   checked   map function     return   this  val   toString        get   join           a note about the selector  id   checkbox     it will grab any item with the string  checkbox  in it   A bit clumsy here  but really good if you are trying to pull the selected values out of something like a  NET CheckBoxList   In that case  checkbox  would be the name that you gave the CheckBoxList control

User · Answer

var voyageId   new Array        input name  voyageId     checked enabled   each function         voyageId push   this  val

User · Answer

A bit more modern way to do it  const selectedValues      input name  quot locationthemes quot   checked   map  function               return   this  val                 get        join         We first find all the selected checkboxes with the given name  and then jQuery s map   iterates through each of them  calling the callback on it to get the value  and returning the result as a new jQuery collection that now holds the checkbox values  We then call get   on it to get an array of values  and then join   to concatenate them into a single string - which is then assigned to the constant selectedValues

User · Answer

In jQuery just use an attribute selector like     input name  locationthemes   checked      to select all checked inputs with name  locationthemes   console log    input name  locationthemes   checked   serialize        or     input name  locationthemes   checked   each function        console log this value            Demo      In VanillaJS      forEach call document querySelectorAll  input name  locationthemes   checked    function cb       console log cb value             Demo     In ES6 spread operator      document querySelectorAll  input name  locationthemes   checked        forEach  cb    gt  console log cb value         Demo

User · Answer

You can also use the below code    input checkbox checked   map function     return   this  val       get

User · Answer

Jquery 3 3 1   getting values for all checked check boxes on button click    x000D   x000D    document  ready function    x000D       btn-submit   click function    x000D        cbCheck checkbox checked   each function    x000D   alert   this  val    x000D        x000D          x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  id  vehicle1  name  vehicle1   class  cbCheck  value  Bike  gt  x000D     lt label for  vehicle1  gt  I have a bike lt  label gt  lt br gt  x000D     lt input type  checkbox  id  vehicle2  name  vehicle2   class  cbCheck  value  Car  gt  x000D     lt label for  vehicle2  gt  I have a car lt  label gt  lt br gt  x000D     lt input type  checkbox  id  vehicle3  name  vehicle3   class  cbCheck  value  Boat  gt  x000D     lt label for  vehicle3  gt  I have a boat lt  label gt  lt br gt  lt br gt  x000D     lt input type  submit  value  Submit  class  btn-submit  gt  x000D   x000D   x000D

User · Answer

Map the array is the quickest and cleanest      var array     map    input name  locationthemes   checked    function c  return c value       will return values as an array like   array   gt   2 3    assuming castle and barn were checked and the others were not

[javascript] use jQuery to get values of selected checkboxes

Examples related to javascript

Examples related to jquery