Select values of checkbox group with jQuery

Question

I m using Zend Form to output a set group of checkboxes    lt label style  white-space  nowrap   gt  lt input type  checkbox  name  user group    id  user group-20  value  20  gt This Group lt  label gt    With a normal HTTP Post these values are passed as an array  but when I m somewhat stumped on how to grab all the values using jQuery  I figured I can select the group using      input  name  user group       val     but that just grabs the value of the first checkbox in the list regardless of if it is checked of not  Any ideas

User · Answer

I m not 100  entirely sure how you want to  grab  the values   But if you want to iterate over the checkboxes you can use  each like so     input  name  user group       each  function         alert   this  val           Of course a better selector is available       checkbox

User · Answer

You can have a javascript variable which stores the number of checkboxes that are emitted  i e in the  lt head gt  of the page    lt script type  text javascript  gt  var num cboxes  lt  php echo  number of checkboxes   gt    lt  script gt    So if there are 10 checkboxes  starting from user group-1 to user group-10  in the javascript code you would get their value in this way   var values new Array    for  x 1  x lt  num cboxes  x         values x      user group-    x  val

User · Answer

I m not 100  entirely sure how you want to  grab  the values   But if you want to iterate over the checkboxes you can use  each like so     input  name  user group       each  function         alert   this  val           Of course a better selector is available       checkbox

User · Answer

I just shortened the answer I selected a bit   var selectedGroups    new Array       input  name  user group     checked   each function         selectedGroups push   this  val           and it works like a charm  thanks

User · Answer

Use  map    adapted from the example at http   api jquery com map     var values      input name  user group     checked   map function index domElement        return   domElement  val

User · Answer

You could use the checked selector to grab only the selected ones  negating the need to know the count or to iterate over them all yourself       input name  user group     checked     With those checked items  you can either create a collection of those values or do something to the collection   var values   new Array      each    input name  user group     checked    function       values push   this  val          or you can do something to the actual checked checkboxes by working directly with   this       something like   this  hide    only something useful  probably   P

User · Answer

I m not sure about the     used in the selector   At least with the latest jQuery  I had to remove the   to get this to function with two different checkbox arrays  otherwise all checked items were selected for each array   var items          input name  items     checked   each function   items push   this  val         var about          input name  about     checked   each function   about push   this  val          Now both  items and about work

User · Answer

var values      input name  user group   checked   map function          return   this  val           get      This will give you all the values of the checked boxed in an array

User · Answer

You could use the checked selector to grab only the selected ones  negating the need to know the count or to iterate over them all yourself       input name  user group     checked     With those checked items  you can either create a collection of those values or do something to the collection   var values   new Array      each    input name  user group     checked    function       values push   this  val          or you can do something to the actual checked checkboxes by working directly with   this       something like   this  hide    only something useful  probably   P

User · Answer

I m not 100  entirely sure how you want to  grab  the values   But if you want to iterate over the checkboxes you can use  each like so     input  name  user group       each  function         alert   this  val           Of course a better selector is available       checkbox

User · Answer

With map in instead of each it is possible to avoid the array creation step   var checkedCheckboxesValues           input checkbox name  groupName   checked            map function                 return   this  val               get      From the map   page of the docs      Pass each element in the current matched set through a function  producing a new jQuery object containing the return values   get   turns those values into an array

User · Answer

x000D   x000D    document  ready function    x000D            btnskillgroup   click function    x000D                getCheckedGroups  skills    x000D                  x000D         btncitiesgroup   click function    x000D                getCheckedGroups  cities    x000D                  x000D           var getCheckedGroups   function groupname   x000D                 var result      input name    groupname     checked    x000D                if  result length  gt  0    x000D                 var resultstring   result length   checkboxes checked  lt br gt    x000D                 result each function    x000D                  resultstring      this  val      lt br gt      append value to exsiting var x000D                     x000D             div  groupname  html resultstring   x000D         else  x000D             div  groupname  html   No checkbox  is Checked    x000D          x000D            x000D              x000D           x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D  Skills  lt input type  checkbox  name  skill   value  Java  gt  Java x000D       lt input type  checkbox  name  skill  value  Jquery  gt  Jquery x000D       lt input type  checkbox  name  skill  value  PHP  gt  PHP x000D   lt br gt  x000D   lt input type  checkbox  name  cities   value  Pune  gt  Pune x000D       lt input type  checkbox  name  cities  value  Baramati  gt  Baramati x000D       lt input type  checkbox  name  cities  value  London  gt  London x000D   x000D       lt input type  submit  id  btnskillgroup  value  Get Checked Skill group  gt  x000D   lt input type  submit  id  btncitiesgroup  value  Get cities checked group  gt  x000D       lt div id  divskills  gt  lt  div gt  x000D   lt div id  divcities  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I m not sure about the     used in the selector   At least with the latest jQuery  I had to remove the   to get this to function with two different checkbox arrays  otherwise all checked items were selected for each array   var items          input name  items     checked   each function   items push   this  val         var about          input name  about     checked   each function   about push   this  val          Now both  items and about work

User · Answer

I just shortened the answer I selected a bit   var selectedGroups    new Array       input  name  user group     checked   each function         selectedGroups push   this  val           and it works like a charm  thanks

User · Answer

I m not 100  entirely sure how you want to  grab  the values   But if you want to iterate over the checkboxes you can use  each like so     input  name  user group       each  function         alert   this  val           Of course a better selector is available       checkbox

User · Answer

I just shortened the answer I selected a bit   var selectedGroups    new Array       input  name  user group     checked   each function         selectedGroups push   this  val           and it works like a charm  thanks

User · Answer

mhata dzenyu mese  its actually   var selectedGroups    new Array        user group checked    each function         selectedGroups push   this  val

User · Answer

x000D   x000D    document  ready function    x000D            btnskillgroup   click function    x000D                getCheckedGroups  skills    x000D                  x000D         btncitiesgroup   click function    x000D                getCheckedGroups  cities    x000D                  x000D           var getCheckedGroups   function groupname   x000D                 var result      input name    groupname     checked    x000D                if  result length  gt  0    x000D                 var resultstring   result length   checkboxes checked  lt br gt    x000D                 result each function    x000D                  resultstring      this  val      lt br gt      append value to exsiting var x000D                     x000D             div  groupname  html resultstring   x000D         else  x000D             div  groupname  html   No checkbox  is Checked    x000D          x000D            x000D              x000D           x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D  Skills  lt input type  checkbox  name  skill   value  Java  gt  Java x000D       lt input type  checkbox  name  skill  value  Jquery  gt  Jquery x000D       lt input type  checkbox  name  skill  value  PHP  gt  PHP x000D   lt br gt  x000D   lt input type  checkbox  name  cities   value  Pune  gt  Pune x000D       lt input type  checkbox  name  cities  value  Baramati  gt  Baramati x000D       lt input type  checkbox  name  cities  value  London  gt  London x000D   x000D       lt input type  submit  id  btnskillgroup  value  Get Checked Skill group  gt  x000D   lt input type  submit  id  btncitiesgroup  value  Get cities checked group  gt  x000D       lt div id  divskills  gt  lt  div gt  x000D   lt div id  divcities  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You could use the checked selector to grab only the selected ones  negating the need to know the count or to iterate over them all yourself       input name  user group     checked     With those checked items  you can either create a collection of those values or do something to the collection   var values   new Array      each    input name  user group     checked    function       values push   this  val          or you can do something to the actual checked checkboxes by working directly with   this       something like   this  hide    only something useful  probably   P

User · Answer

I just shortened the answer I selected a bit   var selectedGroups    new Array       input  name  user group     checked   each function         selectedGroups push   this  val           and it works like a charm  thanks

User · Answer

You can have a javascript variable which stores the number of checkboxes that are emitted  i e in the  lt head gt  of the page    lt script type  text javascript  gt  var num cboxes  lt  php echo  number of checkboxes   gt    lt  script gt    So if there are 10 checkboxes  starting from user group-1 to user group-10  in the javascript code you would get their value in this way   var values new Array    for  x 1  x lt  num cboxes  x         values x      user group-    x  val

User · Answer

With map in instead of each it is possible to avoid the array creation step   var checkedCheckboxesValues           input checkbox name  groupName   checked            map function                 return   this  val               get      From the map   page of the docs      Pass each element in the current matched set through a function  producing a new jQuery object containing the return values   get   turns those values into an array

User · Answer

var values      input name  user group   checked   map function          return   this  val           get      This will give you all the values of the checked boxed in an array

User · Answer

You can have a javascript variable which stores the number of checkboxes that are emitted  i e in the  lt head gt  of the page    lt script type  text javascript  gt  var num cboxes  lt  php echo  number of checkboxes   gt    lt  script gt    So if there are 10 checkboxes  starting from user group-1 to user group-10  in the javascript code you would get their value in this way   var values new Array    for  x 1  x lt  num cboxes  x         values x      user group-    x  val

User · Answer

You could use the checked selector to grab only the selected ones  negating the need to know the count or to iterate over them all yourself       input name  user group     checked     With those checked items  you can either create a collection of those values or do something to the collection   var values   new Array      each    input name  user group     checked    function       values push   this  val          or you can do something to the actual checked checkboxes by working directly with   this       something like   this  hide    only something useful  probably   P

User · Answer

You can have a javascript variable which stores the number of checkboxes that are emitted  i e in the  lt head gt  of the page    lt script type  text javascript  gt  var num cboxes  lt  php echo  number of checkboxes   gt    lt  script gt    So if there are 10 checkboxes  starting from user group-1 to user group-10  in the javascript code you would get their value in this way   var values new Array    for  x 1  x lt  num cboxes  x         values x      user group-    x  val

User · Answer

mhata dzenyu mese  its actually   var selectedGroups    new Array        user group checked    each function         selectedGroups push   this  val

User · Answer

Use  map    adapted from the example at http   api jquery com map     var values      input name  user group     checked   map function index domElement        return   domElement  val

[javascript] Select values of checkbox group with jQuery

Examples related to javascript

Examples related to jquery