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

  ASP.NET   Tuesday, January 15, 2019   1613 | 5 Comments | No Download | No Demo | Pawan kumar
 Tags: 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

In previous post I have explained GridView in ASP.Net using c# tutorial, Simple HTML5 Example (Canvas) with Example Source Code, Create or Generate QR Code in ASP.Net using C#, ASP.NET : Source Code to ASP.NET : Source Code to Get GridView CheckBox Selected Rows jQuery, Check whether CheckBox is checked or not in ASP.Net using C#, Display TextBox when CheckBox is checked in ASP.Net using C#, and many more articles.

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


Post Comments

if you have some suggestion, question, request on Get multiple selected (checked) CheckBox values as Comma Separated String using jQuery.

Please use the comment box to express your views.

 

Comments: