Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery

Category > ASP.NET || Published on : Tuesday, January 15, 2019 || Views: 2188 || Get multiple selected (checked) CheckBox value Comma Separated String using jQuery


Introduction

Here Pawan Kumar will explain how to Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery

Description

Now I will explain How to Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery

So follow the steps to learn Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery

Default.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <table id="tblCars">
        <tr>
            <td><input id="chkAstonMartin" type="checkbox" value="1"/><label for="chkAstonMartin">Aston Martin</label></td>
        </tr>
        <tr>
            <td><input id="chkAudi" type="checkbox" value="2"/><label for="chkAudi">Audi</label></td>
        </tr>
        <tr>
            <td><input id="chkBMW" type="checkbox" value="3"/><label for="chkBMW">BMW</label></td>
        </tr>
        <tr>
            <td><input id="chkCadillac" type="checkbox" value="4"/><label for="chkCadillac">Cadillac</label></td>
        </tr>
        <tr>
            <td><input id="chkChevrolet" type="checkbox" value="5"/><label for="chkChevrolet">Chevrolet</label></td>
        </tr>
    </table>
    <br />
    <input type = "button" id = "btnGet" value = "Get" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                //Create an Array.
                var selected = new Array();

                //Reference the CheckBoxes and insert the checked CheckBox value in Array.
                $("#tblCars input[type=checkbox]:checked").each(function () {
                    selected.push(this.value);
                });

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

 

Conclusion:

So, In this tutorial we have learned, Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery