jQuery Get Multiple Checkbox Value

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 Values of Selected Checboxes

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

jQuery Get Values of Selected Checboxes

Note that, open your console by pressing F12 and see the get all checked checkbox value in array.