您的位置：首页 > Web前端 > JQuery

Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery

2008-12-05 23:34 846 查看
[align=justify][/align]

[align=justify]The CheckBoxList control in ASP.NET provides a group of checkboxes that can be dynamically generated by binding it to a data source. A few months ago, I had written a similar article using ASP.NET and JavaScript over here Check/Uncheck all items in a CheckBoxList using ASP.NET and Javascript . The approach we had taken using JavaScript was, we first retrieved the checkboxlist control using document.getElementById(cbControl) and then counted the number of <input> tags inside that control. Once we got the count, we used a loop to set the state of each control. [/align]
[align=justify]In this article, we will explore how to use jQuery to select unselect all the checkboxes in an ASP.NET CheckBoxList. If you are new to jQuery, check this: Using jQuery with ASP.NET - A Beginner's Guide[/align]
[align=justify]Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.[/align]
[align=justify]Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.[/align]
[align=justify]Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference as shown below[/align]
<script type="text/javascript">

$(document).ready(function() {

$('#chkAll').click(

[align=justify]When the user clicks the checkbox, we run a function which finds all elements of the checkbox type and sets the ‘checked’ value of all items in the CheckBoxList to true or false based on the checked value of the ‘chkAll’ checkbox.[/align]
[align=justify]If you have multiple checkboxlist on your page, you can pass the CheckBoxList name and id as a parameter to the jQuery function as shown here:[/align]
[align=justify] $("INPUT[@name=" + name + "][type='checkbox']").attr('checked', $('#' + id).is(':checked'));[/align]
[align=justify]The entire code with the finalized approach (Approach 3) will look similar to the following:[/align]

<%@ 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 runat="server">

<title>Check/Uncheck All CheckBoxes Using JQuery</title>

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

<script type="text/javascript">

$(document).ready(function() {

$('#chkAll').click(

function() {

$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));

});

});

</script>

</head>

<body>

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

<div>

<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

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

</asp:CheckBoxList>

</div>

</form>

</body>

</html>




[align=justify]On running the application, you get a screen similar to the following:[/align]



[align=justify]On clicking the CheckAll checkbox, all the checkboxes gets selected, similar to a gmail application[/align]



[align=justify]On clicking the CheckAll checkbox again, the checkboxes gets unselected.[/align]



[align=justify]I hope you liked the article and I thank you for viewing it.[/align]

[align=justify]此文章源自http://www.dotnetcurry.com/ShowArticle.aspx?ID=236&AspxAutoDetectCookieSupport=1[/align]
[align=justify]这篇文章英文非常简单，就不用翻译了，是个jquery的小技巧，希望能有用！[/align]

[align=justify][/align]
[align=justify][/align]
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航