Best IT Recipes

Select checkbox group values ​​using jQuery

I use Zend_Form to output the given group of flags:

<label style="white-space: nowrap;"><input type="checkbox" name="user_group[]" id="user_group-20" value="20">This Group</label>

With a normal HTTP message, these values ​​are passed as an array, but when I'm somewhat obsessed with how to capture all the values ​​using jQuery. I decided that I could select a group using:

 $("input[@name='user_group[]']").val()

but it just captures the value of the first checkbox in the list, regardless of whether it is checked. Any ideas?

+59
javascript jquery
Jan 06 '09 at 14:35
source share
10 answers

You can use the selected selector to capture only the selected ones (denying the need to know the counter or iterating over them all yourself):

 $("input[name='user_group[]']:checked")

Using the marked items, you can either create a collection of these values, or do something in 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 });
+121
Jan 6 '09 at 15:04
source share

I am not sure about the "@" which is used in the selector. At least with the latest jQuery, I had to remove @ in order to get this to work with two different blocks of flags, otherwise all the marked elements 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 the elements and the work.

+16
Jul 10 '09 at 13:40
source share

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(); });
+10
Jul 11 2018-12-12T00:
source share

With map instead of each you can avoid the step of creating an array:

 var checkedCheckboxesValues = $('input:checkbox[name="groupName"]:checked') .map(function() { return $(this).val(); }).get();

On the map() page of the docs:

Pass each element in the current matched set through a function, creating a new jQuery object containing return values

get() turns these values ​​into an array.

+7
Jan 11 '14 at 9:01
source share

mhata dzenyu mese. its actually

 var selectedGroups = new Array(); $(".user_group[checked]").each(function() { selectedGroups.push($(this).val()); });
+3
May 7 '09 at 12:12
source share

I simply shortened the answer, which I selected a little:

 var selectedGroups = new Array(); $("input[@name='user_group[]']:checked").each(function() { selectedGroups.push($(this).val()); });

and it works like a charm, thanks!

+2
Jan 06 '09 at 15:14
source share

I am not 100% sure how you want to “capture” the values. But if you want to iterate over the checkboxes, you can use .each like this:

 ("input[@name='user_group[]']").each( function() { alert($(this).val()); });

Of course, the best selector is available:

 $(':checkbox')
+1
Jan 06 '09 at 15:06
source share

You may have a javascript variable that stores the number of flags that go out, i.e. in the <head> page:

 <script type="text/javascript"> var num_cboxes=<?php echo $number_of_checkboxes;?>; </script>

So, if there are 10 flags, starting from user_group-1 to user_group-10 , in javascript code you get their value this way:

 var values=new Array(); for (x=1; x<=num_cboxes; x++) { values[x]=$("#user_group-" + x).val(); }
0
Jan 6 '09 at 14:40
source share
 var values = $("input[name='user_group']:checked").map(function(){ return $(this).val(); }).get();

This will give you all the values ​​marked in the box in the array.

0
Jun 12 '14 at 13:19
source share

 $(document).ready(function(){ $('#btnskillgroup').click(function(){ getCheckedGroups('skills'); }); $('#btncitiesgroup').click(function(){ getCheckedGroups('cities'); }); var getCheckedGroups = function(groupname){ var result = $('input[name="'+groupname+'"]:checked'); if (result.length > 0) { var resultstring = result.length +"checkboxes checked <br>"; result.each(function(){ resultstring += $(this).val()+" <br>"; //append value to exsiting var }); $('#div'+groupname).html(resultstring); }else{ $('#div'+groupname).html(" No checkbox is Checked"); } }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> Skills:<input type="checkbox" name="skill" value="Java"> Java <input type="checkbox" name="skill" value="Jquery"> Jquery <input type="checkbox" name="skill" value="PHP"> PHP <br> <input type="checkbox" name="cities" value="Pune"> Pune <input type="checkbox" name="cities" value="Baramati"> Baramati <input type="checkbox" name="cities" value="London"> London <input type="submit" id="btnskillgroup" value="Get Checked Skill group"> <input type="submit" id="btncitiesgroup" value="Get cities checked group"> <div id="divskills"></div> <div id="divcities"></div>
0
Feb 10 '17 at 2:03
source share


More articles:


All Articles