asp.net CheckBoxList using jQuery:

-

ASP.NET CheckBoxList control using jQuery:



Checkboxlist on web page :

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
</asp:CheckBoxList>
<input type="button" value="OK" id=”btn" />
Display message by JQuery on browser:
<script language="javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            alert('Hello JQuery');
        });
    });
</script>
Get items asp.net CheckBoxList using jQuery:
$("# btn").click(function () {     
    var selectedValues = [];
    $("[id*=CheckBoxList1] input:checked").each(function () {          
        selectedValues.push($(this).val());
    });
    if (selectedValues.length>0) {
        alert("Selected Value(s): " + selectedValues);
    } else {
        alert("No item has been selected.");
    }
}); 

Using JavaScript with ASP.Net CheckBoxList Control:

We give many Examples related to the checkboxlist control and jquery in this programming tutorial these are listed here:
Checkboxlist related other old post on asp.net tutorial.

Access CheckBoxList Control:

We take a checkboxlist with listitems.
<asp:CheckBoxList ID="chkListCity" runat="server" Width="132px">
                    <asp:ListItem Value="LN">city1</asp:ListItem>
                    <asp:ListItem Value="NY">city2</asp:ListItem>
                    <asp:ListItem Value="CA">city3</asp:ListItem>
                    <asp:ListItem Value="PA">city4</asp:ListItem>
                    <asp:ListItem Value="TK">city5</asp:ListItem>
                </asp:CheckBoxList>

We can accessing ASP.NET CheckBoxList Control at Client Side by jQuery.

Code of Example checkboxlist1aspx.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkboxlist1aspx.aspx.cs"
    Inherits="checkboxlist1aspx" %>

<!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 id="Head1" runat="server">
    <title>jQuery CheckBox</title>
    <script src="Scripts/1.7.2.jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
 $('#cmdCheck').click(function (event) {
                event.preventDefault();
                $('#chkStatus').attr('checked', true);
            });
          
            $('#cmdUnCheck').click(function (event) {
                event.preventDefault();
                $('#chkStatus').attr('checked', false);
            });
           
            $('#cmdGetCheckedStatus').click(function (event) {
                event.preventDefault();
                alert($('#chkStatus:checked').is(':checked'));
            });
          
            $('#cmdGetCheckboxValue').click(function (event) {
                event.preventDefault();
                alert($('label[for=' + $('#chkStatus').attr('id') + ']').html());
            });
          
          
            $('#chkStatus').click(function () {
                alert($('#chkStatus').attr('checked') ? true : false);
                alert($('#chkStatus:checked').val() ? true : false);
                alert($('#chkStatus:checked').is(':checked'));
            });
           
            $('#cmdLoopList').click(function (event) {
                event.preventDefault();
                $('#chkListCity input:checkbox').each(function () {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
          
          
            $('#cmdLoop').click(function (event) {
                event.preventDefault();
                $("input[type=checkbox]").each(function () {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
          
          
            $('#cmdLoopChecked').click(function (event) {
                event.preventDefault();
                $("input[type=checkbox][checked]").each(function () {
                    alert($(this).attr('id') + ' => ' + $(this).is(':checked'));
                });
            });
         
          
            $('#cmdGetValues').click(function (event) {
                event.preventDefault();
                $("input[type=checkbox]").each(function () {
                    alert($('label[for=' + this.id + ']').html() + ' => ' + $(this).is(':checked'));
                });
            });
           
           
        });
    </script>
</head>
<body>
    <form id="frmCheckBox" runat="server">
    <table style="width: 477px">
        <tr>
            <td colspan="2">
                <b>Single Checkbox</b>
                :</td>
        </tr>
        <tr>
            <td>
                Is Active?
            </td>
          

           
            <td>
                <asp:CheckBox ID="chkStatus" runat="server" Text="Active" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="cmdCheck" runat="server" Text="Check" Width="150px" /><br />
                <asp:Button ID="cmdUnCheck" runat="server" Text="UnCheck" Width="150px" /><br />
                <asp:Button ID="cmdGetCheckedStatus" runat="server" Text="Get Checked checkbox Status" Width="150px" /><br />
                <asp:Button ID="cmdGetCheckboxValue" runat="server" Text="Get checked Checkbox Value"  Width="150px" /><br />
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <b>CheckboxList</b>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Select City
            </strong>
            </td>
            <td>
                <asp:CheckBoxList ID="chkListCity" runat="server" Width="132px">
                    <asp:ListItem Value="LN">city1</asp:ListItem>
                    <asp:ListItem Value="NY">city2</asp:ListItem>
                    <asp:ListItem Value="CA">city3</asp:ListItem>
                    <asp:ListItem Value="PA">city4</asp:ListItem>
                    <asp:ListItem Value="TK">city5</asp:ListItem>
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
              
              
                <asp:Button ID="cmdLoopChecked" runat="server" Text="Loop Checked Checkboxes from list" Width="150px"/><br />
                <asp:Button ID="cmdGetValues" runat="server" Text="Get CheckBox items Values" Width="150px" /><br />
                <asp:Button ID="cmdGetSelectedList" runat="server" Text="Get Selected CheckBoxs in Page" Width="150px" /><br />
                <asp:Button ID="cmdGetSelectedCheckboxList" runat="server" Text="Get Selected form CheckBoxList" Width="150px" /><br />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

 Other Asp.net control related Example:

Comments

Post a Comment

Popular posts from this blog