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:
- Check box in ASP.NET GridView
- Asp.net CheckBoxList using jQuery:
- Validation checkbox control using JavaScript
- Check box in ASP.NET GridView
- Ckeck box list example using javascript.
- Asp.net checkbox list Example.
- Validate ASP.Net RadioButtonList using JavaScript Example
- jquery disable or Enable submit button after validation
- Enable Disable Submit Button using jQuery
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>
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:
- code for java script validation in
- use of file upload control in asp.net
- ajax controls.html
- what is cookies and how to create
- windows communication foundation
- example of crystal report
- Hide radio buttons in javascript
- Session management in .net programming
- Example of session management.
- Data type in c with asp.net.html
- Declear pointer in asp.net_programming
- Declare pointer in asp.net.html
- Web services in asp.html
- How to set current data into asp text.html.
Dear brother this is good but there are some problem, who is given below:-
ReplyDeleteWhile click on select All that's work good but after click on select all I am clicking on mango that time select all not not unchecked automatically.
and if I click manually on all every field that time "select all" should be checked automatically but not checked ?