用javascript操纵GridView中CheckBox

最新推荐文章于 2023-08-09 14:41:42 发布
最新推荐文章于 2023-08-09 14:41:42 发布
阅读量690 收藏
点赞数
分类专栏： asp.net 文章标签： javascript asp asp.net input function server

CheckBox.aspx
主要包含一个GridView，里面包含了我们要折腾的CheckBox，还有一大~~~~堆的javascript，当然也还是我们折腾的重要手段，只是目标基本已经换成了GridView中的CheckBox，和GridView本身并没有太大关系

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBox.aspx.cs" Inherits="CheckBox" %>

<!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>CheckBox</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView runat="server" ID="gvMeiMingZi" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <input name="chk" type="checkbox" value="<%#Eval("ID")%>" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="ID" />
                <asp:BoundField DataField="Author" HeaderText="Author" />
                <asp:BoundField DataField="Title" HeaderText="Title" />
                <asp:BoundField DataField="PostTime" HeaderText="PostTime" />
                <asp:BoundField DataField="URL"
                    DataFormatString="<a href='{0}' target='_blank'>点击打开</a>"
                    HeaderText="Link" HtmlEncode="False" />
            </Columns>
        </asp:GridView>
        <p>已选择的项：<input type="text" size="60" id="checked" /></p>
        <p>要选择的项：<input type="text" size="60" id="checking" /><input type="button" value="选择" οnclick="CheckThem()" /></p>
        <p>当从上面GridView中选择或取消选择一项时，“已选择的项”中会自动更新为当前所有选中项的ID。</p>
        <p>在“要选择的项”里填写要选择的项的ID（ID间用英文逗号分隔），点击“选择”可自动选中要选择的项。</p>
    </form>
    <script type="text/javascript">
        //先获取到所有的checkbox再说
        var chkList = document.getElementsByName("chk");

        window.onload = function(){
            //为所有checkbox添加onclick事件处理，以自动更新“已选择的项”
            for(var i=0; i<chkList.length; i++){
                chkList[i].onclick = chkClick;
            }
        }

        //checkbox的onclick事件，用于更新“已选择的项”
        function chkClick(){
            var checkedList = "";

            //获取所有被选中的项
            for(var i=0; i<chkList.length; i++){
                if(chkList[i].checked)
                    checkedList += chkList[i].value + ",";
            }

            //把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号
            document.getElementById("checked").value = checkedList.substring(0,checkedList.length-1);
        }

        //根据在“要选择的项”中的输入选中相应的项
        function CheckThem(){
            var checkingList = document.getElementById("checking").value;

            //没有输入就直接返回
            if(checkingList.length==0){return;}

            //获取所有想要选择项的ID
            var checkingIds = checkingList.split(",");

            //设置选择状态，注意两个循环的顺序，如果把chkList放到内层，将不能保证总是取得正确结果
            //因为如果输入了多个ID，后面的ID会把前面的正确结果给冲掉
            for(var j=0; j<chkList.length; j++){
                for(var i=0; i<checkingIds.length; i++){
                    if(checkingIds[i] == chkList[j].value){
                        chkList[j].checked = true;
                        break;
                    }
                    else{
                        chkList[j].checked = false;
                    }
                }
            }
        }
    </script>
</body>
</html>
CheckBox.aspx.cs
还是用来生成测试数据的，不然前面的GridView里没东西，就没得折腾了

using System;
using System.Data;

public partial class CheckBox:System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //生成DataTable并添加相应的列
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("Author");
        dt.Columns.Add("Title");
        dt.Columns.Add("PostTime");
        dt.Columns.Add("URL");

        //测试数据填充
        dt.Rows.Add(1, "丁学", "用javascript/css实现GridView行背景色交替、点击行变色", "*************",
            "**********************************************************************");
        dt.Rows.Add(1, "丁学", "突发奇想－－有关微软未来", "2008-05-11 09:59",
            "http://www.cnblogs.com/dingxue/archive/2008/05/11/1191936.html");
        dt.Rows.Add(2, "丁学", "可爱的google翻译，笑死我了", "2008-05-11 09:07 ",
            "http://www.cnblogs.com/dingxue/archive/2008/05/11/1191900.html");
        dt.Rows.Add(3, "丁学", "模板修改后重新发布", "2008-04-26 07:22",
            "http://www.cnblogs.com/dingxue/archive/2008/04/26/1171778.html");
        dt.Rows.Add(4, "丁学", "想买啥 VS 买了啥！理想与现实的差距咋就这么大咧?", "2008-04-13 07:39",
            "http://www.cnblogs.com/dingxue/archive/2008/04/13/1150952.html");
        dt.Rows.Add(5, "丁学", "XHTML/CSS记忆力大测试，两项都超过我，我请你吃饭！", "2008-04-03 06:40",
            "http://www.cnblogs.com/dingxue/archive/2008/04/03/xhtml_css_test.html");
        dt.Rows.Add(6, "丁学", "Designer VS Coder, who is the winner?", "2008-03-26 07:44",
            "http://www.cnblogs.com/dingxue/archive/2008/03/26/coder_vs_designer.html");
        dt.Rows.Add(7, "丁学", "用DIV模拟弹出窗口－－窗体滚动跟随－－丁学", "2007-09-03 08:42",
            "http://www.cnblogs.com/dingxue/archive/2007/09/03/879654.html");
        dt.Rows.Add(8, "丁学", "一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现", "2007-08-09 07:12",
            "http://www.cnblogs.com/dingxue/archive/2007/08/09/848555.html");
        dt.Rows.Add(9, "丁学", "关于IE7关闭窗口时总是提示和上传图片前的本地预览解决办法", "2007-06-19 08:50",
            "http://www.cnblogs.com/dingxue/archive/2007/06/19/788449.html");
        dt.Rows.Add(10, "丁学", "IE对input元素onchange事件的支持BUG", "2007-03-23 07:54",
            "http://www.cnblogs.com/dingxue/archive/2007/03/23/684807.html");
        dt.Rows.Add(11, "丁学", "由验证控件引起的IE的超级爆笑BUG", "2007-03-22 07:35",
            "http://www.cnblogs.com/dingxue/archive/2007/03/22/683401.html");
        dt.Rows.Add(12, "丁学", "DIV中滚动条设置到随机位置(CSS+Javascript)", "2007-03-18 12:17",
            "http://www.cnblogs.com/dingxue/archive/2007/03/18/678839.html");
        dt.Rows.Add(13, "丁学", "ASP.NET AJAX1.0尝鲜试用：Web Service调用", "2007-03-17 17:36",
            "http://www.cnblogs.com/dingxue/archive/2007/03/17/678383.html");
        dt.Rows.Add(14, "丁学", "ASP.NET中利用利用Skin引入CSS的问题", "2007-03-17 17:30",
            "http://www.cnblogs.com/dingxue/archive/2007/03/17/678374.html");

        //将DataTable绑定到GridView
        gvMeiMingZi.DataSource = dt;
        gvMeiMingZi.DataBind();
    }
}

流程管理
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现GridView中添加CheckBox列(全选与否)
程先的专栏
08-26 2748
(一).功能    1. JavaScript检索CheckBox并实现全选和全消功能(二).代码       1. GridView中的代码主要片段:                           //头模板代码                                               onclick="javascript:SelectAll(t
ASP.NET DEMO 10: 如何通过 javascript 访问 GridView/DataGrid 选中 CheckBox 行各列的值
weixin_34380948的博客
07-15 102
功能需求1,  单击 checkbox 返回当前行值2,  外部按钮获取所有选择行的值实现说明参见主要代码，代码为自说明式。主要代码 &lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"&gt;            &lt;Columns&gt;                           ...
GridView控件中添加CheckBox控件，并且实现选择、全选和反选
学过印刷包装工程研究过食品科学且会点计算机编程的多功能码农
10-19 9207
一、如何在GridView中添加CheckBox控件？      1、添加一个GridView控件后，单击向右箭头，选择【编辑列】；      2、在弹出的【字段】窗口中，选择TemplateField项，点击【添加】>>【确定】；      3、在弹出的窗口选择【编辑模板】，选择刚才添加的列项，将工具箱中的CheckBox控件拖入到模板中ItemTemplate中。      4、当需要
gridview+checkbox的各种操作
古老的未来
08-17 3523
转自：http://blog.csdn.net/pplcheer/article/details/50437363 1.首先如何在gridview中加入一个checkbox，注意不是checkboxfiled [csharp] view plain copy                                 
Winform中DatagridView 表头实现一个加上一个checkBox，实现全选选项功能
最新发布
munangs的博客
08-09 9298
Winform中DatagridView 表头实现一个加上一个checkBox，实现全选选项功能
JavaScript取得gridview中获取checkbox选中的值
10-19
主要介绍了 js取得gridview中获取checkbox选中的值,本文给大家分享两段代码片段，非常不错，具有参考借鉴价值，需要的朋友可以参考下
gridview和checkboxlist的嵌套相关应用
10-27
在Web开发中，GridView控件和CheckBoxList控件是ASP.NET框架中常用的数据展示和用户交互组件。GridView用于展示表格形式的数据，而CheckBoxList则用于显示一组可选的复选框列表。当这两种控件被巧妙地嵌套使用时，...
获取GridView中Checkbox的值
06-28
在示例代码中，GridView的ID为"GridView1"，并且我们添加了一个TemplateField来自定义Checkbox字段，其ID为"Checkbox1"，并使用Eval方法绑定数据行的"id"字段作为Checkbox的value属性。其他BoundField分别展示了...
winform中gridview的checkbox使用案例
03-29
本篇文章将深入探讨如何在Winform的GridView中使用Checkbox，并通过具体的案例进行详细讲解。 一、GridView控件基础 1. 添加GridView控件：在Visual Studio的设计视图中，从工具箱拖拽DataGridView控件到窗体上，...
GridView中加上CheckBox 的全选功能的代码
10-27
在ASP.NET开发中，GridView控件经常用于展示数据表格，而添加CheckBox则能提供多选功能，例如在数据操作时进行批量选择。本教程将详细讲解如何在GridView中实现CheckBox的全选与反选功能，并进一步说明如何通过用户...
GridView和CheckBox结合使用
10-15
GridView和CheckBox可实现功能定制
GridView设置选中状态
11-15
给GridView设置默认选中效果 及 选中后的效果
GridView And CheckBox
03-09
在GridView中放置CheckBox进行单选,或是多选.
GridView和CheckBox结合
09-02
GridView和CheckBox结合
js获得Gridview中选中checkbox行的信息
06-17
js获得Gridview中选中checkbox行的信息，当你选择GridView中某一行或某几行前面的checkbox时可以得到当前行的所有信息或部分信息。
js控制Gridview中的checkbox全选(转)
隋旭峰的专栏
08-17 1289
<br />js代码部分<br />function SelectAll(chkbox)<br />           {<br />              var theBox=chkbox;<br />              xState=theBox.checked;    <br />              elem=theBox.form.elements;<br />              for(i=0;i<elem.length;i++)<br />            
JS操作gridview checkbox
寻找被遗忘的记忆
08-24 541
<br /> function GetSelectData(){<br />        var linedata = new Array();<br />        var obj = event.srcElement;<br />        var tr = null;<br />        if(obj.tagName!="INPUT"){<br />            return ;<br />        }<br />        tr =obj.parentElemen
CheckBox模版列的使用（转）
成长记录笔记
06-18 859
 在GridView里使用CheckBox2007年03月30日 星期五 20:02在GridView的第一列使用CheckBox控制每一行数据，是经常使用的，这里面我要记录的是全选、全消、选中行的底色更改，还有就是在提交数据的时候，取选中的行的编号等功能aspx页面定义： asp:GridView ID="GridView1" runat="server">         Co
listview和LitePal2
m0_64867588的博客
12-05 143
Student stu = LitePal.find(Student.class, model.getId()); //类名，查找id 修改： //先查询到数据,然后更改数据, Student stu = LitePal.find(Student.class, 1); stu.setUsername(“admin”); stu.save(); //更新指定id的数据 Student stu = new Student(); stu.setUsername(“admin”); stu.updat
asp.net中gridview的checkbox使用总结
05-24
在ASP.NET中使用GridView控件的Checkbox列可以让用户方便地选择多个行，以进行批量操作。以下是使用GridView控件的Checkbox列的一些总结： 1. 添加Checkbox列 在GridView控件的模板列中添加Checkbox列，可以使用以下代码： ``` <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" /> </ItemTemplate> </asp:TemplateField> ... </Columns> ... </asp:GridView> ``` 2. 获取选中行 在处理GridView控件的Checkbox列时，需要遍历GridView中的所有行，检查每个Checkbox是否被选中。可以使用以下代码来获取选中的行： ``` foreach (GridViewRow row in GridView1.Rows) { CheckBox chk = (CheckBox)row.FindControl("CheckBox1"); if (chk.Checked) { // 选中的行 } } ``` 3. 设置全选 为了方便用户选择所有行，可以在页面上添加一个“全选”复选框，并使用JavaScript代码来设置GridView中所有Checkbox的选中状态。可以使用以下代码来设置全选： ``` <script type="text/javascript"> function selectAll() { var chkAll = document.getElementById('<%= chkAll.ClientID %>'); var grid = document.getElementById('<%= GridView1.ClientID %>'); for (var i = 0; i < grid.rows.length; i++) { var chk = grid.rows[i].cells[0].getElementsByTagName("input")[0]; if (chk.type == "checkbox") { chk.checked = chkAll.checked; } } } </script> <asp:CheckBox ID="chkAll" runat="server" onclick="selectAll();" /> ``` 4. 处理PostBack 在处理PostBack时，需要检查GridView中的所有行，并处理选中的行。可以使用以下代码来处理PostBack： ``` protected void Button1_Click(object sender, EventArgs e) { foreach (GridViewRow row in GridView1.Rows) { CheckBox chk = (CheckBox)row.FindControl("CheckBox1"); if (chk.Checked) { // 选中的行 } } } ``` 希望这些总结能够对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值