jQuery Api Get Multi Checkbox val to Comma (,) String

jQuery Api Get Multi Checkbox val to Comma (,) String

How to get multiple checkbox values and change into comma separated string. Using the jQuery :checked selector, You can get all selected checkbox values.

Here you will learn two different type for get the selected checkbox values.

Let’s jQuery Api Get Multiple Checkbox values

jQuery :checked selector

Using the jQuery :checked selector can get all selected checkbox values.

Example 1 of get all checked checkbox values

<!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>                            

Output

jQuery Get Values of Selected Checboxes

Select your favorite Programming Languages :


In the above example 1 of get all checbox values in comma separated string, we have use map method to get all checked checkbox values and using the join method to convert selected checkbox value into comma separated string

Example 2 of Get All checked checkbox values

<!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 favProgramming = [];
           $.each($("input[name='programming1']:checked"), function(){            
                favProgramming .push($(this).val());
            });

            alert("My favourite programming languages are: " + favProgramming );
        });
    });
</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>                            

Output

Get Values of Selected Checboxes

Select your favorite Programming Languages :


In the above example 2 of get all checked checkbox values in comma separated string using jquery Api selector, we have used each method to get all checked checkbox values and using the join method to convert selected checkbox values into comma separated string.

Leave a Reply

Your email address will not be published. Required fields are marked *