jQuery Get Multiple Checked Checkbox Values Example

by

jQuery get multiple checked checkbox value example; In this tutorial you will learn how to get multiple selected checkbox values using jquery.

When the button is clicked the selected (checked) checkboxes value will be inserted into an Array. We can multiple checkbox’s value as comma separated string using jquery.

Example 1: jQuery get Multiple Checkbox Value

<!DOCTYPE html>
<html>
<head>
    <title>Get selected checkbox value from checkboxlist in Jquery - Nicesnippests.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <table id="checkboxTable">
        <tr>
            <td><input type="checkbox" value="php"/><label>PHP</label></td>
        </tr>
        <tr>
            <td><input type="checkbox" value="laravel"/><label>Laravel</label></td>
        </tr>
        <tr>
            <td><input type="checkbox" value="jquery"/><label>jQuery</label></td>
        </tr>
        <tr>
            <td><input type="checkbox" value="vuejs"/><label>vuejs</label></td>
        </tr>
        <tr>
            <td><input type="checkbox" value="react"/><label>React</label></td>
        </tr>
    </table>
    <button type="button" onclick="getCheckedCheckboxes()">Get</button>

</body>

<script type="text/javascript">
    function getCheckedCheckboxes() {
        var val = [];

        $("#checkboxTable input[type=checkbox]:checked").each(function (i) {
            val[i] = $(this).val();
        });

        alert(val);
    }
</script>

</html>

Example 2: get multiple checkbox’s value as comma separated String

<script type="text/javascript">
    function getCheckedCheckboxes() {
        var selected = new Array();

        $("#checkboxTable input[type=checkbox]:checked").each(function () {
            selected.push(this.value);
        });

        if (selected.length > 0) {
            alert("Selected values: " + selected.join(", "));
        }
    }
</script>

Example 3: get Multiple selected value using Map

<script type="text/javascript">
    function getCheckedCheckboxes() {
        var selectedValues =$('#checkboxTable input[type=checkbox]:checked').map(function() {
            return this.value;
        }).get().join(', ');

        alert(selectedValues);
    }
</script>

I hope these examples help you.

Leave a Comment