程序员在开发的时候,经常会遇到对查询列表中的记录进行批量操作的情况。
1、实现的方法往往就是在每条记录前面加一个复选框,然后在列表下方放置一个“全选/全不选”复选框。
2、当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选”复选框后,列表中的所有复选框都取消选中。
3、当列表中的复选框都取消选中后,“全选/全不选”复选框也要取消选中。当列表中的复选框都选中后,“全选/全不选”复选框也要选中。
4、得到所有选中记录的值。
这项功能其实也很简单,但往往用的时候都要重新再写一遍,于是把它总结为一个模块,记录下来,以便再用。
(1)首先是在每条记录前加入复选框,该处复选框中的值为“id|username”(示例),即选中此复选框会同时传两个值(传一个值的太简单,就不举例了),中间用|隔开,下面取值时会用到:
<input id="box" name="box" type="checkbox" value="id|username" onclick="checkonebox('checkall','box')"/>
(2)然后在下方加入“全选/全不选”复选框。
<input id="checkall" type="checkbox" value="" onclick="checkboxall('checkall','box')"/> 全选/全不选
(3)关键实现javascript
//点击"全选/全不选"复选框,如果选中,则选中全部复选框,否则取消选中全部复选框
function checkboxall( Allname,name) {
var ischecked = document.getElementById(Allname).checked;
if(ischecked) {
checkallbox(name);
}else {
discheckallbox(name);
}
}
//选中全部复选框
function checkallbox(name) {
var boxarray = document.getElementsByName(name);
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = true;
}
}
//取消选中全部复选框
function discheckallbox(name) {
var boxarray = document.getElementsByName(name);
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = false;
}
}
//点击某个复选框,如果所有复选框都选中,“全选/全不选”复选框也选中
//否则如果所有复选框都取消选中,“全选/全不选”复选框也取消选中
function checkonebox(Allname,name) {
if(isallchecked(name)) {
document.getElementById(Allname).checked = true;
}
if(isalldischecked(name)) {
document.getElementById(Allname).checked = false;
}
}
//是否全部选中
function isallchecked(name) {
var boxarray = document.getElementsByName(name);
for(var i = 0; i < boxarray.length; i++) {
if(!boxarray[i].checked) {
return false;
}
}
return true;
}
//是否全部没有选中
function isalldischecked(name) {
var boxarray = document.getElementsByName(name);
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
return false;
}
}
return true;
}
//得到选中项的值的集合,结果为“1|小明,2|小王,3|小李”的形式
function getallcheckedvalue(name) {
var boxvalues = "";
var boxarray = document.getElementsByName(name);
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
var boxvalue = boxarray[i].value;
if(boxvalues == "") {
boxvalues = boxvalue;
}else {
boxvalues = boxvalues + "," + boxvalue;
}
}
}
return boxvalues;
}
//如果只需要得到其中选中项的id值的集合,方法如下,得到的值为(1,2,3,…)
function getIds() {
var boxvalues = getallcheckedvalue();
var boxvaluesArray = boxvalues.split(",");
var ids = "";
for(var i = 0; i < boxvaluesArray.length; i++) {
var boxvalue = boxvaluesArray[i];
var boxvalueArray = boxvalue.split("|");
var id = boxvalueArray[0];
var username = boxvalueArray[1];
if(ids == "") {
ids = id;
}else {
ids = ids + "," + id;
}
}
return ids;
}
最后,总结步骤:每条记录前加复选框,加“全选/全不选”复选框,调用javascript,OK。
分享到:
相关推荐
通过复选框选取要删除记录 然后点击删除按钮批量删除的js脚本
javascript 实现复选框全选/取消功能
经由本人验证,绝对正确,并且简单,易操作的jsp批量删除
JSP(SSH) 批量删除JSP(SSH) 批量删除JSP(SSH) 批量删除JSP(SSH) 批量删除
批量删除 复选框 多选 批量删除 实例参考 简单易懂
在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除、修改、查看等操作。 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上...
选中“正则表达式”复选框,表明我们要在查找、替换中使用正则表达式。然后,选中“替换范围”中的“当前文件”,表明对当前文件操作。 ②、单击“查找内容”组合框右侧的按钮,出现下拉菜单。 ③、下面的操作添加...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示图片...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示...
6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...
文本框 文本域 UBB文本框(支持UBB文本输入) 密码框 隐藏域 日期选择 单选框 复选框 下拉框 多选列表 单选列表 批量上载 上载文件 上载到库 07、支持多种信息显示方式: 显示文字 链接文件 文本框 文本域 显示...
18.4 复选框 716 18.5 密码域 717 18.6 表单的应用 718 第19章 表格的操作 724 19.1 应用JavaScript操作表格 725 19.2 对单元格进行控制 737 19.3 表格的特殊效果 748 第5篇 操作Word、Excel、报表与打印篇 第20章 ...
18.4 复选框 716 18.5 密码域 717 18.6 表单的应用 718 第19章 表格的操作 724 19.1 应用JavaScript操作表格 725 19.2 对单元格进行控制 737 19.3 表格的特殊效果 748 第5篇 操作Word、Excel、报表与打印篇 第20章 ...
管理员也可以通过勾选每条评论前面的复选框,对评论进行批量删除或审核。评论详情如下图所示: 网友在前台可以对评论进行回复或顶操作,支持评论堆楼的效果,如下图所示: 2.4.2. 留言管理 点击“功能组件”左侧...