Retrieve checked value, text and validation of CheckBoxList in JQuery in Asp.Net - ProgramIdea

CheckBoxList in Jquery

Here we are studying about use of checkbox list in jquery like: how to validate ChechBoxList, how to retrieve text of multiple checked checkbox and how to retrieve values of multiple checked checkbox in jquery in Asp.Net.

Here we are taking an example of CheckBoxList that have multiple options to select.

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

            <asp:ListItem Value="1">Asp.Net</asp:ListItem>

            <asp:ListItem Value="2">C#</asp:ListItem>

            <asp:ListItem Value="3">MVC</asp:ListItem>

            <asp:ListItem Value="4">Sql Server</asp:ListItem>

            <asp:ListItem Value="5">JQuery</asp:ListItem>

            <asp:ListItem Value="6">WPF</asp:ListItem>

            <asp:ListItem Value="7">Windows Phone</asp:ListItem>

</asp:CheckBoxList>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" />

CheckBoxList validation in JQuery in Asp.Net

Write following script function in your header part of page to validate CheckBoxList.

<script type="text/javascript">

        function validate() {

            if ($("#<%=CheckBoxList1.ClientID%> :checkbox:checked" ).length == 0) {

                alert("Please select your favourite language");

                return false;

            }            

        }

    </script>

Pass above function on button's OnClientClick event to validate CheckBoxlist.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick ="return validate();"  />

Retrieve selected checkbox's text

function validate() {

            if ($("#<%=CheckBoxList1.ClientID%> :checkbox:checked" ).length == 0) {

                alert("Please select your favourite language");

                return false;

            }

            else {

                $("#<%=CheckBoxList1.ClientID%> :checkbox:checked").each(function  () {

 

                    var text = $(this).next().text(); 

                    alert("Selected CheckBox text is : " + text);

                });

            }

        }

Retrieve selected checkbox's value

function validate() {

            if ($("#<%=CheckBoxList1.ClientID%> :checkbox:checked" ).length == 0) {

                alert("Please select your favourite language");

                return false;

            }

            else {

                $("#<%=CheckBoxList1.ClientID%> :checkbox:checked").each(function  () { 

                   

                    var value = $(this).val();

                    alert("Selected CheckBox value is : " + value);

                });

            }

        }

A complete example of above examples.

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>CheckBox in JQuery</title>

    <script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function validate() {

            if ($("#<%=CheckBoxList1.ClientID%> :checkbox:checked" ).length == 0) {

                alert("Please select your favourite language");

                return false;

            }

            else {

                $("#<%=CheckBoxList1.ClientID%> :checkbox:checked").each(function  () {

 

                    var text = $(this).next().text();

                    var value = $(this).val();

 

                    alert("Selected CheckBox text is : " + text);                   

                    alert("Selected CheckBox value is : " + value);

 

                    alert("Selected CheckBox text is : " + text + " and value is : " + value);

                });

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div style="margin-left:200px;">

        <asp:CheckBoxList ID="CheckBoxList1" runat="server">

            <asp:ListItem Value="1">Asp.Net</asp:ListItem>

            <asp:ListItem Value="2">C#</asp:ListItem>

            <asp:ListItem Value="3">MVC</asp:ListItem>

            <asp:ListItem Value="4">Sql Server</asp:ListItem>

            <asp:ListItem Value="5">JQuery</asp:ListItem>

            <asp:ListItem Value="6">WPF</asp:ListItem>

            <asp:ListItem Value="7">Windows Phone</asp:ListItem>

        </asp:CheckBoxList>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick ="return validate();"  />

    </div>

    </form>

</body>

</html>

Demo: