Last Updated on August 12, 2022 by Roshan Parihar
In this tutorial, learn how to get value of all checked checkboxes in an array format using jQuery. The short answer is to use the push() function with join() function of jQuery.
You can also use the map() with get() to get the checked checkbox value in jQuery.
Let’s find out with the examples given below.
Method 1: jQuery Get Value of All Checked Checkboxes in Array Using push() and join()
To get the value of all checked checkboxes in an array format, you have to use the click event of jQuery to check the click on the checkboxes. You also have to use the each to check each checked checkboxes with :checked selector. After that, use the push function to create an array and store checked checkboxes values using val().
It also requires adding the values in comma separation using the join() function of 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 and the button element. You need to select multiple checkboxes and click the button to get the checked checkbox values in an alert box.
Method 2: Using map() with get() to Find Values of Selected Checkbox in jQuery
If you want to find the values of selected checkboxes in an array format, you have to use the click event with map() function of jQuery. It also requires to use the val() and get() at the end to collect values.
|
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
You can select multiple checkboxes given above. After that, click the button element to get the checked checkbox values in an array format in the alert box.
You May Also Like to Read