jQuery get multiple checkbox value; Through this tutorial, i am going to show you how to get multiple checkbox values to comma separated string and array using jQuery :checked selector.
jQuery Get Multiple Checkbox values
Using the jQuery :checked selector; you can get multiple checkbox values to comma separated string and array in jQuery:
- jQuery Get Multiple Checkbox values to comma separated string
- jQuery Get All Checked Checkbox Values in Array
jQuery Get Multiple Checkbox values to comma separated string
See the following example with demo to multiple checkbox values to comma separated string from html elements using jQuery:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Get Values of Selected Checboxes</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn_click").click(function(){ var programming = $("input[name='programming']:checked").map(function() { return this.value; }).get().join(', '); alert("My favourite programming languages are: " + programming); }); }); </script> </head> <body> <form> <h3>Select your favorite Programming Languages :</h3> <label><input type="checkbox" value="PHP" name="programming"> PHP</label> <label><input type="checkbox" value="Java" name="programming"> Java</label> <label><input type="checkbox" value="Ruby" name="programming"> Ruby</label> <label><input type="checkbox" value="Python" name="programming"> Python</label> <label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label> <label><input type="checkbox" value="C" name="programming"> C</label> <br> <button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button> </form> </body> </html>
Demo of jQuery Get Multiple Checkbox values to comma separated string
jQuery Get All Checked Checkbox Values in Array
See the following example with demo to get all checked checkbox value in array from html elements using jQuery:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Get Values of Selected Checboxes</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn_click_second").click(function(){ var favProgramming1 = []; $.each($("input[name='programming1']:checked"), function(){ favProgramming1.push($(this).val()); }); alert("My favourite programming languages are: " + favProgramming1 ); console.log(favProgramming1); }); }); </script> </head> <body> <form> <h3>Select your favorite Programming Languages :</h3> <label><input type="checkbox" value="PHP" name="programming1"> PHP</label> <label><input type="checkbox" value="Java" name="programming1"> Java</label> <label><input type="checkbox" value="Ruby" name="programming1"> Ruby</label> <label><input type="checkbox" value="Python" name="programming1"> Python</label> <label><input type="checkbox" value="JavaScript" name="programming1"> JavaScript</label> <label><input type="checkbox" value="C" name="programming1"> C</label> <br> <button type="button" class="btn_click_second" style="margin-top: 10px;">Click here to Get Values</button> </form> </body> </html>
Demo of jQuery Get All Checked Checkbox Values in Array
Note that, open your console by pressing F12 and see the get all checked checkbox value in array.
Be First to Comment