Last Updated on August 15, 2022 by Roshan Parihar
In this tutorial, learn how to get multiple selected checkbox values or checked checkboxes values using jQuery. The short answer is to use the push() function to push elements in an array with join() function to combine them.
You can also use the map() with get() to get the checked checkbox values in jQuery.
Let’s find out with the examples given below.
Method 1: Using push() and join() to Get Multiple Selected Checkbox Values in jQuery
To get the multiple selected checkbox value, you have to first use the click event of jQuery to find the value when someone clicks on the checkboxes. After that, create an array variable and use the push() after each() to add the value of clicked checkboxes one by one. You have to use the val() function to get the value of the clicked checkboxes.
Now, use the join() function to make comma-separated values using jQuery. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('button').click(function(){ var cricketer = []; $("input:checkbox[name='cricketer']:checked").each(function(){ cricketer.push($(this).val()); }); alert(cricketer.join(", ")); }); }); </script> <form> <input type="checkbox" name="cricketer" value="Virat Kohli"> Virat Kohli <input type="checkbox" name="cricketer" value="Chris Gayle"> Chris Gayle <input type="checkbox" name="cricketer" value="Mahendra Singh Dhoni"> Mahendra Singh Dhoni <input type="checkbox" name="cricketer" value="Sachin Tendulkar"> Sachin Tendulkar <input type="checkbox" name="cricketer" value="Donald Bradman"> Donald Bradman <button type="button" class="btn btn-primary" id="btnMultiple">Get Multiple Value</button> </form> |
Output
The above example contains the checkboxes that you can select multiple by using CTRL of your keyboard and the button element. You can click the multiple checkboxes for multiple selections. On each selection, you will get the value in an alert box.
Method 2: Using map() with get() to Find Values of Checked Checkboxes in jQuery
In addition to the above example, you can also use the map() for checking the values of the checked checkbox. Inside this function, you have to use the val() function to get the values of clicked checkboxes. After that, use the get() to get the collect values in a variable in comma separation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $('button').click(function(){ var checkedvalue = $("input[name='counting']:checked").map(function(){ return $(this).val(); }).get(); alert(checkedvalue); }); }); </script> <form> <input type="checkbox" name="counting" value="One"> One <input type="checkbox" name="counting" value="Two"> Two <input type="checkbox" name="counting" value="Three"> Three <input type="checkbox" name="counting" value="Four"> Four <input type="checkbox" name="counting" value="Five"> Five <button type="button">Get Multiple Value</button> </form> |
Output
When you select multiple checkboxes and click the button given above, you will get the selected multiple values in an alert box.
You May Also Like to Read