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.

Friday, August 22, 2014

Check Uncheck all asp.net CheckBox in asp.net using jQuery

Check Uncheck all asp.net CheckBox in asp.net using jQuery with C# code Example :


In this post we consider a Question in this the user want something as :
I am just trying to check/uncheck all checkboxes using jquery in my asp.net web page. Now by checking/unchecking the parent checkbox (fallow by all Childs) the entire child checkboxes are getting selected / deselected and the text of parent checkbox get changed to check all/uncheck all.

CheckBoxList control in ASP.NET :

The CheckBoxList control in ASP.NET provides a group of checkboxes that can be dynamically create by binding this by data source.  In this asp.net tutorial we have written many similar article using ASP.NET and JavaScript over here Check/Uncheck all items in a CheckBoxList using ASP.NET and Javascript  these are listed here.Check Uncheck all asp.net CheckBox in asp.net using jQuery

Other asp.net checkbox related post:


JQuery Function for select/unselect :

JQuery Function that is use to select all checkbox and change caption of parent checkbox is
<script type="text/javascript">
        $(function () {
            $("[id*=chkAll]").bind("click", function () {
                if ($(this).is(":checked")) {
                    $("[id*=chk] input").attr("checked", "checked");
                } else {
                    $("[id*=chk] input").removeAttr("checked");
                }
            });
            $("[id*=chkFruits] input").bind("click", function () {
                if ($("[id*=chk] input:checked").length == $("[id*=chk] input").length) {
                    $("[id*=chkAll]").attr("checked", "checked");
                } else {
                    $("[id*=chkAll]").removeAttr("checked");
                }
            });
        });
    </script>

Code for uncheck/check checkbox by jQuery in asp.net:

For this post we take one parent checkbox and a list of checkbox as child checkbox.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=chkAll]").bind("click", function () {
                if ($(this).is(":checked")) {
                    $("[id*=chk] input").attr("checked", "checked");
                } else {
                    $("[id*=chk] input").removeAttr("checked");
                }
            });
            $("[id*=chkFruits] input").bind("click", function () {
                if ($("[id*=chk] input:checked").length == $("[id*=chk] input").length) {
                    $("[id*=chkAll]").attr("checked", "checked");
                } else {
                    $("[id*=chkAll]").removeAttr("checked");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center" style="font-size: large">
        <asp:CheckBox ID="chkAll" Text="Select All" runat="server" Style="font-weight: 700;
            font-size: x-large" />
        <asp:CheckBoxList ID="chk" runat="server">
            <asp:ListItem Text="Mango" />
            <asp:ListItem Text="Apple" />
            <asp:ListItem Text="Banana" />
            <asp:ListItem Text="Pineapple" />
            <asp:ListItem Text="Guava" />
            <asp:ListItem Text="Grapes" />
            <asp:ListItem Text="Papaya" />
        </asp:CheckBoxList>
    </div>
    </form>
</body>
</html>

Check Uncheck all asp.net CheckBox in asp.net using jQuery

C# Code for uncheck/check checkbox by jQuery :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
        }
    }
}




Other Asp.net Related Post:


No comments:

Post a Comment