Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Monday, August 25, 2014

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:

No comments:

Post a Comment