Last Updated on August 12, 2022 by Roshan Parihar
In this tutorial, learn how to get selected checkbox value using jQuery. The short answer is to use the change event with val() to get a single checked checkbox value.
The checkbox does not allow users to select only one checkbox as you can select multiple checkboxes. However, to restrict users to allowing only a single checkbox selection, you have to use jQuery as given below.
|
1 2 |
//To allow users select only one checkbox $('input[name="checkboxname"]').not(this).prop('checked', false); |
If you want to allow users to select only a single checkbox, you have to use the prop() and not() as given above. This is the code snippet that you have to use in each example given below. You have to replace checkboxname with the name of your checkbox.
Let’s find out how to get single and multiple selected checkbox values with the examples given below.
Method 1: jQuery Get Selected Checkbox Value on Change Event with val() Function
To get the selected checkbox value, you have to use the change event using the change() function of jQuery. After that, you can use the :checked selector with val() function of jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ //for change event $('input[name="cricket"]').on('change', function() { //To allow users select only one checkbox $('input[name="cricket"]').not(this).prop('checked', false); //Get selected checkbox value alert($('input[name="cricket"]:checked').val()); }); }); </script> <form> <input type="checkbox" name="cricket" value="Virat Kohli"> Virat Kohli <input type="checkbox" name="cricket" value="Chris Gayle"> Chris Gayle <input type="checkbox" name="cricket" value="Mahendra Singh Dhoni"> Mahendra Singh Dhoni <input type="checkbox" name="cricket" value="Sachin Tendulkar"> Sachin Tendulkar <input type="checkbox" name="cricket" value="Donald Bradman"> Donald Bradman </form> |
Output
The above example contains the checkbox that you can click to get the selected checkbox value. It will allow selecting only a single checkbox and not multiple checkboxes. On each selection, you will get its value in the alert box.
Method 2: Find Checked Checkbox Value on Click Event with val() Function of jQuery
If you want to find the checked checkbox value, you can use the click event using the click() of jQuery. After that, you have to use the val() to find the checked checkbox value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('input[name="color"]').click(function(){ $('input[name="color"]').not(this).prop('checked', false); alert($(this).val()); }); }); </script> <form> <input type="checkbox" name="color" value="Red"> Red <input type="checkbox" name="color" value="Green"> Green <input type="checkbox" name="color" value="Blue"> Blue <input type="checkbox" name="color" value="Yellow"> Yellow <input type="checkbox" name="color" value="Brown"> Brown </form> |
Output
When you click any of the checkboxes given above, you will get the checked checkbox value in the alert box. It’s the easiest method of getting the value of the checked checkbox.
Method 3: Using map() of jQuery to Get Selected Checkbox Value
In addition to the above examples, you can also use the click event with the jQuery map() function. You also have to use the selector :checked to find the checked checkboxes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $('input[name="counting"]').click(function(){ $('input[name="counting"]').not(this).prop('checked', false); var checkedvalue = $.map($('input[name="counting"]:checked'), function(c){return c.value; }) 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 </form> |
Output
Now, to get the value of the selected checkbox, you have to click the checkboxes given above. On each click, you will get the value of the selected checkbox in the alert box.
How to Get Multiple Checked Checkboxes Values in jQuery
If you want to get the value for multiple selections, you have to create an array variable. First, you have to declare a variable as an array to store the checkbox value in an array format. After that, you have to use the each() to scan each selected checkboxe to find if checked.
To create an array of checkboxes, you have to use the push function and push each checked checkbox to the array variable. After that, use the join() function to get the checked checkbox values in an array format in comma separation.
|
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).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
Click multiple checkboxes to get value at the click of the button given above. The array can be useful to get multiple selection values and get user input data.
You May Also Like to Read.
- How to Get the Select Box Option Value on Using jQuery
- Get the id of an HTML Element on Hover Using jQuery
- JQuery Gets Id Of An HTML Element On Click
- How to Get Selected Radio Button Value Using jQuery
I hope you like this tutorial on how to get selected checkbox values using jQuery.