Menu
I have many checkboxs as below,
<li><input type="checkbox" name="areaofinterest" value="home_coo" id="home_coo" class="Checkbox" > Cooking</li> <li><input type="checkbox" name="areaofinterest" value="home_cra" id="home_cra" class="Checkbox"> Crafts</li> <li><input type="checkbox" name="areaofinterest" value="home_dec" id="home_dec" class="Checkbox"> Decorating</li> <li><input type="checkbox" name="areaofinterest" value="home_ent" id="home_ent" class="Checkbox"> Entertaining</li> <li><input type="checkbox" name="areaofinterest" value="home_gar" id="home_gar" class="Checkbox"> Gardening</li> <li><input type="checkbox" name="areaofinterest" value="home_hom" id="home_hom" class="Checkbox"> Home Improvement</li> <li><input type="checkbox" name="areaofinterest" value="home_mar" id="home_mar" class="Checkbox"> Marriage</li> <li><input type="checkbox" name="areaofinterest" value="home_par" id="home_par" class="Checkbox"> Parenting</li> <li><input type="checkbox" name="areaofinterest" value="home_pet" id="home_pet" class="Checkbox" > Pets</li> <li><input type="checkbox" name="areaofinterest" value="home_ret" id="home_ret" class="Checkbox"> Retirement</li> How can I use jQuery to get the checked values and output as areaofinterest="home_coo,home_mar,home_pet" ?
Thanks a lot.
862
You can use :checkbox and name attribute selector ( :checkbox[name=example\\[\\]] ) to get the list of checkbox with name="example[]" and then you can use :checked filter to get only the selected checkbox. Then you can use . map function to create an array out of the selected checkbox.
Using jQuery, we first set an onclick event on the button after the document is loaded. In the onclick event, we created a function in which we first declared an array named arr. After that, we used a query selector to select all the selected checkboxes. Finally, we print all the vales in an alert box.
Add square brackets ( [] ) at the end of the checkbox name when a form has multiple checkboxes with the same name. PHP creates an associative array to stored values of the selected checkboxes if checkboxes have the same name that ends with [] .
Use the .map() function:
$('.Checkbox:checked').map(function() {return this.value;}).get().join(',') Breaking that down:
$('.Checkbox:checked') selects the checked checkboxes.
.map(function() {return this.value;}) creates a jQuery object that holds an array containing the values of the checked checkboxes.
.get() returns the actual array.
.join(','); joins all of the elements of the array into a string, separated by a comma.
Working DEMO
70
var areaofinterest = ''; $('[name="areaofinterest"]').each(function(i,e) { var comma = areaofinterest.length===0?'':','; areaofinterest += (comma+e.value); }); To get only checked boxes value :
var areaofinterest = ''; $('[name="areaofinterest"]').each(function(i,e) { if ($(e).is(':checked')) { var comma = areaofinterest.length===0?'':','; areaofinterest += (comma+e.value); } }); FIDDLE
You could also do:
var areaofinterest = []; $('[name="areaofinterest"]:checked').each(function(i,e) { areaofinterest.push(e.value); }); areaofinterest = areaofinterest.join(','); And there's probably a bunch of other ways to do this ?
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
