Last Updated on August 11, 2022 by Roshan Parihar
In this tutorial, learn how to get selected checkboxes id on click using jQuery. The short answer is to use the attr() function with id as its argument. Get the ids of all selected checkboxes or multiple selected checkboxes values or single selected checkbox.
Find the id of a checkbox and get its ids in an array format. Use the array format to get individual IDs using jQuery. You can also find how to allow only a single selection of checkboxes here.
Let’s find out with the examples given below.
Get Selected Checkbox Id Using jQuery(Single Selection Only)
The single selected checkbox allows selecting only one checkbox at a time. You have to use the :checked selector to find the checked checkboxes using jQuery. After that, you have to use the attr() function and pass id as its argument to get the selected checkboxes id on click of the button.
See the below example to find how to get a single selected checkbox id in jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('input[name="cricket"]').on('change', function() { $('input[name="cricket"]').not(this).prop('checked', false); alert("The best cricketer is: " + $('input[name="cricket"]:checked').attr("id")); }); }); </script> <form> <input type="checkbox" name="cricket" value="Virat Kohli" class="mycheck"> Virat Kohli <input type="checkbox" name="cricket" value="Chris Gayle" class="mycheck"> Chris Gayle <input type="checkbox" name="cricket" value="Mahendra Singh Dhoni" class="mycheck"> Mahendra Singh Dhoni <input type="checkbox" name="cricket" value="Sachin Tendulkar" class="mycheck"> Sachin Tendulkar <input type="checkbox" name="cricket" value="Donald Bradman" class="mycheck"> Donald Bradman </form> |
Output
Select the above checkbox to get id
You can select only one checkbox at a time from the checkboxes given above. Click any checkbox given above to get its id. On select of a checkbox, you will get its id in the alert box.
Find Multiple Checked Checkboxes Ids in jQuery
If you want to find the ids of the multiple selected checkboxes using jQuery, you have to use the each function to find each selected checkboxes. Now, to get the ids of selected checkboxes in an array format, you have to use the push() with attr(). Also, pass id as the argument of attr().
See the example below to get the ids of multiple selected checkboxes using jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('#btnMultiple').click(function(){ var cricketer = []; $("input:checkbox[name='cricketer']:checked").each(function(){ cricketer.push($(this).attr("id")); }); alert("The best cricketers are: " + cricketer.join(", ")); }); }); </script> <form> <input type="checkbox" name="cricketer" value="Virat Kohli" class="mycheck"> Virat Kohli <input type="checkbox" name="cricketer" value="Chris Gayle" class="mycheck"> Chris Gayle <input type="checkbox" name="cricketer" value="Mahendra Singh Dhoni" class="mycheck"> Mahendra Singh Dhoni <input type="checkbox" name="cricketer" value="Sachin Tendulkar" class="mycheck"> Sachin Tendulkar <input type="checkbox" name="cricketer" value="Donald Bradman" class="mycheck"> Donald Bradman <button type="button" class="btn btn-primary" id="btnMultiple">Get Multiple Id</button> </form> |
Output
Select multiple checkboxes above and click the button to get ids in an array format
To select the multiple checkboxes, you need to press the CTRL button on your keyboard and click the multiple checkboxes. On each click, you will get the ids of checked checkboxes in an array format.
- How to Get Selected Checkbox Value Using jQuery
- Check If Checkbox is Checked or Not Using jQuery
- How to Get Select Box Option Value on Select Using jQuery
I hope you like this tutorial on how to get selected checkboxes id on click using jQuery.