在asp.net 的webform中使用jquery进行对gridview中的checkbox进行全选和反全选的操作。...

最新推荐文章于 2025-04-23 15:46:21 发布

weixin_30580943

最新推荐文章于 2025-04-23 15:46:21 发布

阅读量206

点赞数

原文链接：http://www.cnblogs.com/yhrch/p/5649887.html

版权

本文介绍了一种解决在使用Bootstrap的Metronic框架时遇到的Checkbox状态不同步的问题。通过使用jQuery的prop方法来统一设置和获取Checkbox的选中状态，确保了页面显示与实际状态一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很久没有写技术博客了，今天抽闲分享一下一点感受。先简单说说下述代码的由来：我在项目中使用bootstrap 的 metronic框架导致使用jquery设定checkbox的选中和不选中时，checkbox选择状态值(true/false)改变但页面中展现的状态并不改变。为解决此问题，度娘和GG都用上了，也做了不少Demo，最后确定产生问题的原因是metronic框架中的脚本缺陷(至少我是这样认为的)，而不是网上说的jquery1.6+以后的版本应该用prop而不是attr来设定和获取checked属性，也不是我猜测的masterpage产生。

下面的代码就是其中的一个Demo，在此记录下来以加深对本次问题解决的印象。

效果图

 1 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 2 
 3 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 4 </asp:Content>
 5 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 6   
 7    <input type="checkbox" id="btn1" οnclick="selectAll();" >全选/全不选
 8    <br/>
 9    <asp:CheckBox id="checkTest0" runat="server" value="checkbox1"/>
10    checkbox1
11    <asp:CheckBox id="checkTest1" runat="server" value="checkbox1"/>
12    checkbox2
13    <asp:CheckBox id="checkTest2" runat="server" value="checkbox1"/>
14    checkbox3
15    <asp:CheckBox id="checkTest3" runat="server" value="checkbox1"/>
16    checkbox4
17    <asp:CheckBox id="checkTest4" runat="server" value="checkbox1"/>
18    checkbox5
19    <asp:CheckBox id="checkTest5" runat="server" value="checkbox1"/>
20    checkbox6
21    <asp:CheckBox id="checkTest6" runat="server" value="checkbox1"/>
22    checkbox7
23    <asp:CheckBox id="checkTest7" runat="server" value="checkbox1"/>
24  checkbox8
25 
26     <br/><br/><br/>
27     <asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="False">
28         <Columns>
29             <asp:TemplateField>
30                 <HeaderTemplate>
31                     <input id="chkSelectAll" type="checkbox" οnclick="selectAllCheckBox();" />
32                 </HeaderTemplate>
33                 <ItemTemplate>
34                     <asp:CheckBox ID="chkTest" runat="server"  ToolTip='<%=Eval("UserId") %>' />
35                 </ItemTemplate>
36             </asp:TemplateField>
37             <asp:BoundField HeaderText="UserId" DataField="UserId" />
38             <asp:BoundField HeaderText="UserName" DataField="UserName" />
39             
40         </Columns>
41     </asp:GridView>
42 
43     <script>
44         function selectAll() {
45             //alert(1);
46             var checkFlag = $("#btn1").prop("checked");
47             if (checkFlag) {
48                 $("input[type='checkbox'][id^='ContentPlaceHolder1_checkTest']").each(function () {
49                     $(this).prop('checked', checkFlag);
50                 });
51             }
52             else {
53                 $("input[type='checkbox'][id^='ContentPlaceHolder1_checkTest']").each(function () {
54                     $(this).prop('checked', checkFlag);
55                 });
56             }
57         }
58 
59         function selectAllCheckBox() {
60             var checkFlag = $("#chkSelectAll").prop("checked");
61             if (checkFlag) {
62                 $("input[type='checkbox'][id^='ContentPlaceHolder1_gvTest_chkTest_']").each(function () {
63                     $(this).prop('checked', checkFlag);
64                 });
65             }
66             else {
67                 $("input[type='checkbox'][id^='ContentPlaceHolder1_gvTest_chkTest_']").each(function () {
68                     $(this).prop('checked', checkFlag);
69                 });
70             }
71         }
72     </script>
73 </asp:Content>

Default2.aspx子页面前台代码

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 
 8 public partial class Default2 : System.Web.UI.Page
 9 {
10     protected void Page_Load(object sender, EventArgs e)
11     {
12         if(!this.IsPostBack)
13         {
14             this.gvTest.DataSource = ItemData.GetItemData();
15             this.gvTest.DataBind();
16         }
17     }
18 }
19 
20 public class ItemData
21 {
22     public string UserId { get; set; }
23     public string UserName { get; set; }
24     public ItemData(string id,string name)
25     {
26         this.UserId = id;
27         this.UserName = name;
28     }
29 
30     public static List<ItemData> GetItemData()
31     {
32         List<ItemData> list = new List<ItemData>();
33 
34         list.Add(new ItemData("1","dfddffd"));
35         list.Add(new ItemData("2", "afd343"));
36         list.Add(new ItemData("3", "dfdddfdffd"));
37         list.Add(new ItemData("4", "dfdderererereffd"));
38         list.Add(new ItemData("5", "dfadfadfdfder4ere"));
39 
40         return list;
41     }
42 }