点击button按钮实现全选_全选按钮的实现及事件的处理
这种全选的效果在后台是很需要的,因为有时候数据很多,如果想删除全部的数据,没有全选按钮岂不是很麻烦,所以很有必要实现这种全选的效果,并执行相关的事件,下面就来看看如何实现
先来看看第一种方法:
首先先布局好全选和控件中复选框按钮,全选按钮我们使用html
控件中复选框
全选
数据项就采用web控件中的复选框:
代码如下
全选
Js事件
function changeState(isChecked)
{
var chk_list=document.getElementsByTagName("input");
for(var i=0;i
{
if(chk_list[i].type=="checkbox")
{
chk_list[i].checked=isChecked;
}
}
}
这样就基本实现了点击全选按钮的时候,数据项的复选框也被全部选中了,但是,现在还有一个问题,就是如果全部选中,在取消数据项中的一个选项,那么此时全选的复选框就不应该选中,这个就需要我们来触发控件的DataBound事件,用来自动绑定onclick事件,一般在控件中需要触发事件的,因为不能直接触发服务器事件,所以只能触发js事件,这就需要我们使用html控件,调用js,或者是直接触发绑定控件的DataBound事件,通过Attributes.add为控件添加客户端的onclick等js事件!下面我们就来触发DataBound事件完成上面的需求
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType==DataControlRowType.DataRow)
{
CheckBox chk = e.Row.FindControl("chk") as CheckBox;
if(chk!=null){
chk.Attributes.Add("onclick", "javascript:if(this.checked==false){document.getElementById('Checkbox1').checked=false}");
}
}
}
下面就基本完成了全选事件
现在话说回来,全选的实现是为了某一个事件而为之,比如删除,如果我们要删除所有的项,那就只能通过全选了,现在我们就来触发删除事件
protected void delButtom_Click(object sender, EventArgs e)
{
bool fig = false;
for (int i = 0; i < this.GridView1.Rows.Count; i++)
{
CheckBox chk = this.GridView1.Rows[i].FindControl("chk") as CheckBox;
if(chk!=null)
{
if(chk.Checked==true)
{
fig = true;
int id =Convert.ToInt32(this.GridView1.DataKeys[i].Value);
NewsManager.Del(id);
}
}
}
if(fig==false)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "", ""); ;
}
DateBindNews();
}
下面就来看看第二种方法:
全选部分复选框都是采用的html标签即input标签,和第一种方法大体相同,个别处理方式不一样,最主要的是处理删除事件的时候,它首先是通过js将所有选中复选框的值放到一个控件中,然后再后台获得这个控件的所有值放到数据组中,然后循环这个数组,调用删除方法删除即可!
这个实现类似上面的DataBound事件就简单的多了,直接在html控件中写onclick事件就可以了
' />
基本程序是这样的:
全选按钮:
全选
绑定项复选框
' />
Js:
//先获取所有的Checkbox
var chkList = document.getElementsByName("CheckBox1");
window.onload = function()
{
//为所有checkbox添加onclick事件处理,以自动更新“已选择的项”
for(var i=0; i
{
chkList[i].οnclick= chkClick;
}
}
//checkbox的onclick事件,用于更新“已选择的项”
function chkClick(){
var checkedList = "";
//获取所有被选中的项
for(var i=0; i
if(chkList[i].checked)
{
checkedList += chkList[i].value + ",";
}else
{
document.getElementByIdx_x_x("CheckBoxAll").checked=false;
}
}
//把选中项的列表显示到“已选择的项”中,substring在这里是为了去除最后一个逗号
document.getElementByIdx_x_x("").value = checkedList.substring(0,checkedList.length-1);
}
function checkAll()
{
var chkall=document.getElementByIdx_x_x("CheckBoxAll");
if(chkall.checked)
{
var checkedList = "";
for(var i=0;i
{
chkList[i].checked=true;
checkedList += chkList[i].value + ",";
}
document.getElementByIdx_x_x("").value = checkedList.substring(0,checkedList.length-1);
}
else
{
for(var i=0;i
chkList[i].checked=false;
document.getElementByIdx_x_x("").value="";
}
}
后台执行删除事件
protected void linkDeleteAll_Click(object sender, EventArgs e)
{
string type = this.HiddenField1.Value;
if (type != "")
{
string[] keyValue = type.Split(',');
foreach (string keyName in keyValue)
{
BLL.Message.Delete(Convert.ToInt32(keyName));
}
this.HiddenField1.Value = "";
this.M_RepeatertBind((string)ViewState[vsKey]);
}
else
{
Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "");
}
}
或者使用sql语句的in,如
delete from student where id in(1,2,3)
这样也可以
第三种方式
JS
function select_all() {
for (i = 0; i < window.document.Form1.length; i++) {
if (window.document.Form1.elements[i].type == "checkbox") {
window.document.Form1.elements[i].checked = window.document.Form1.selectall.checked;
}
}
}
html
全选
要选择的:
cs:
protected void ButDel_Click(object sender, ImageClickEventArgs e)
{
//如果没选择要删除的项,给予提示
bool fig = false;
for (int i = 0; i
{
CheckBox chk = list_Repeater1.Items[i].FindControl("chk") as CheckBox;
HiddenField hid = list_Repeater1.Items[i].FindControl("hid") as HiddenField;
if(chk!=null)
{
if(chk.Checked==true)
{
bf.Delete(Convert.ToInt32(hid.Value));
fig = true;
}
}
}
if(fig==false)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "", "");
}
Bind();
}
第四种:jquery实现
function checkAll(chkobj){
if($(chkobj).text()=="全选")
{
$(chkobj).text("取消");
$(".checkall input").attr("checked", true);
}else{
$(chkobj).text("全选");
$(".checkall input").attr("checked", false);
}
}
基本流程就是这样,这三种方式大同小异,逻辑都差不多,总结起来,以后直接使用,提高工作效率!
点击button按钮实现全选_全选按钮的实现及事件的处理相关推荐
- 点击button按钮实现全选_全选按钮(简单实现)
案例分析 1.当全选按钮选中时,下面的按钮全部点亮,反之全灭.(利用checked) //找到全选按钮和所有单选按钮 var j_cbAll = document.querySelector('#j_ ...
- button onclick 多个同名_多个按钮的OnClickListener()android
您只需按照以下步骤轻松实现-- 您不必为每个按钮编写新的onClickListener -只需将View.OnClickLister实现到您的Activity / Fragment ..它将实现名为o ...
- 屏幕测试图片全屏_全屏视频测试
屏幕测试图片全屏 只需记录一些全屏视频技术以及jQuery UI对话框窗口即可 . 我已经在演示中嵌入了YouTube视频,但是您可以嵌入任何视频. 在GitHub上 查看演示 查看项目 正在检查浏览 ...
- 计算机显示桌面的按钮,显示桌面按钮不见了怎么办_显示桌面按钮不见了
我们习惯于直接单击任务栏中快速启动栏中的"显示桌面"按钮来一键最小化所有窗口,尤其是打开了很多窗口时一一最小化所有打开的窗口更显得烦锁.但是,这个"显示桌面"按 ...
- etax导入账户不让勾选_勾选认证详解及常见问题分析
一.勾选认证与扫描认证异同 与传统扫描认证相比,勾选认证有了很大的不同,具体如下图: 二.勾选认证操作 第一步,插上金税盘或者税控盘,打开etax.hntax. gov.cn,点击"增值税专 ...
- excel 下拉列表多选_多选Excel下拉列表中无重复项
excel 下拉列表多选 Thanks to an email question from Leslie, I've done another variation on the Data Valida ...
- python全栈和java全栈_全栈和python的区别
首先我们来e68a84e8a2ad62616964757a686964616f31333366303138看看Python在公司的一些基础应用: 1.验证算法:就是对公司一些常见设计算法或者公式的验证 ...
- java把按钮和键盘对应_按键与按钮的区别?
[简答题]单程票发售模块主要由哪些部件组成? (3.0分) [单选题]薪资给付的计算方法中,下列哪一种不适用计件制的方法 [填空题]TVM显示设备运行模式和当前状态的部件是( ). (3.8分) [其 ...
- Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...
最新文章
- linux中查看lvm的名称,关于Linux中LVM的使用总结
- 为什么重启路由器 经常重启让WiFi更快
- 控制结构(1)-判断控制
- Spring源码解析-核心类之XmlBeanDefinitionReader
- hdu 1233 还是畅通工程(最小生成树的Prim和Kruskal两种算法的c++实现)(prim算法详解)...
- [NOIP2014]飞扬的小鸟
- boot lib分离 spring_spring boot + gradle打包bootJar分离lib
- oracle并发执行max,跪求大量并发执行insert into select语句的方案
- linux常用命令(精)
- linux eclipse gtk,Ubuntu+Eclipse下开发GTK+应用程序
- Ubuntu 16.04创建用户,用户授权,查看用户权限
- 设计学习---《大象》之系统分析
- 《深入理解JVM》读书笔记
- html5橡皮擦,HTML5 Canvas笔记——实现橡皮擦功能,包括矩形擦和圆形擦。
- 如何导入以前的qq聊天记录
- 显存(Video Memory)
- 教育培训机构如何打赢“教育营销流量战“?
- [再寄小读者之数学篇](2014-05-30 对数不等式)
- 冒险岛V79个人用私服搭建回顾
- win10 旗舰版 系统激活出现 在连接到本地注册表时出现错误0x80041002 提示信息 解决方法...