`

JSP列表中复选框批量选择功能实现

阅读更多
程序员在开发的时候,经常会遇到对查询列表中的记录进行批量操作的情况。

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。
分享到:
评论

相关推荐

    jsp中通过复选框批量删除的js脚本

    ### JSP中通过复选框批量删除的JS脚本知识点详解 #### 一、背景介绍 在Web开发中,特别是使用JavaServer Pages (JSP) 和 JavaScript 的项目中,经常需要实现用户界面与后台数据交互的功能。其中一项常见的需求是...

    jsp使用复选框做成的批量删除

    本教程将详细讲解如何利用JSP和复选框实现批量删除的功能。 首先,我们需要理解JSP的基本结构和工作原理。JSP是Java的一种视图技术,它允许我们在HTML页面中嵌入Java代码,从而动态生成网页内容。在批量删除的场景...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    Jquery复选框的值

    在"Jquery复选框的值"这个主题中,我们将探讨如何利用jQuery实现批量获取复选框的值,并通过一个简单的`index.jsp`示例来阐述这一过程。 首先,我们需要了解HTML中复选框的基本结构。复选框通常使用`&lt;input&gt;`元素的...

    JSP中的批量删除111111111

    这可以通过HTML表格或者复选框实现,每个待删除的项对应一个复选框。例如: ```html &lt;form action="deleteBatch.jsp" method="post"&gt; ${items}" var="item"&gt; &lt;td&gt;&lt;input type="checkbox" name="selectedIds" ...

    老裴帮助关于Jquery操作复选框的小练习

    在提供的"CheckBox.jsp"文件中,很可能是用来演示以上jQuery操作复选框的实践代码。这个文件可能包含HTML结构、CSS样式以及JavaScript/jQuery脚本,展示了如何在实际应用中与复选框交互。 通过这些知识点,你可以...

    JSP(SSH) 批量删除JSP(SSH) 批量删除

    JSP(SSH) 批量删除JSP(SSH) 批量删除JSP(SSH) 批量删除JSP(SSH) 批量删除

    jsp+servlet批量删除

    批量删除功能是许多web应用程序中常见的需求,例如在管理后台或者数据列表页面,用户可能需要选择多个条目进行一次性删除。本实例主要探讨如何结合JSP和Servlet实现这样的功能。 首先,我们需要理解`JSP`和`Servlet...

    一览画面点击复选框后获取多个id值的方法

    通过获取特定name属性值的复选框集合,并利用循环来改变其checked属性,从而实现全选和全不选的功能。 2. 通过前台JavaScript代码实现对选中记录的id值进行收集。这需要一个函数batchDeletechFaq,该函数会遍历所有...

    jQuery+SpringMVC中的复选框选择与传值实例

    在jQuery和SpringMVC的开发中,处理复选框的选择和传递值是一个常见的需求,尤其在数据批量操作如删除、更新等场景下。本实例详细介绍了如何使用jQuery来控制复选框的选择状态,并将选中的复选框的值传递到SpringMVC...

    Servlet+jsp(有接口批量删除)

    在“Servlet+jsp(有接口批量删除)”这个主题中,我们将深入探讨如何利用Servlet和JSP实现批量删除的功能,这通常涉及到用户界面交互、后端逻辑处理以及数据库操作。 首先,我们需要了解Servlet的角色。Servlet是...

    jsp批量删除用户信息

    这通常通过多选框实现,每个用户行前都有一个复选框供用户选择。 2. **用户选择**:用户在列表中勾选想要删除的用户,这些选择可以通过JavaScript或者jQuery等前端库来收集和处理。 3. **数据提交**:当用户点击...

    struts2 的批量删除功能完整例子

    在这个例子中,它可能包含了批量删除功能的前端交互元素,如一个复选框列表供用户选择要删除的日志,以及一个提交按钮触发删除操作。JSP页面通常会使用Struts2的标签库,如`s:iterator`遍历数据集,`s:checkbox`创建...

    jsp 批量修改, 分页

    3. **用户交互**:添加复选框允许用户选择需要修改的记录,并提供提交按钮触发修改操作。 4. **提交处理**:当用户点击提交按钮,JSP页面通过POST请求将选定的记录ID和新的值发送到服务器。在服务器端,这些信息...

    通用的JSP分页+增删改查+批量删除

    批量删除允许用户一次选择多条记录进行删除,通常需要前端提供多选功能(如复选框)和确认操作。后端需要处理这些选中的主键,然后执行一条删除语句,或者循环执行多次单条删除。 **实现方法** 在这个项目中,可能...

    S2SH+JQuery的checkbox批量选择并在action中获取数据

    本文将详细介绍如何使用S2SH框架配合jQuery实现复选框的批量选择,并在Action中获取这些被选中的数据。 #### 二、关键技术组件介绍 1. **Struts2**:MVC模式的一个开源框架,用于构建企业级Java Web应用程序。 2. ...

    jsp+servlet小项目

    关于复选框的操作,可能是指在列表展示中,用户可以通过复选框选择多个记录进行批量操作,如批量删除或批量修改。Servlet需要处理这些复选框的值,根据用户的选择执行相应的数据库操作。 总的来说,这个项目涵盖了...

    Web端基本的模糊查询、单个删除修改及批量删除功能

    用户可以选择多条记录进行删除,这通常需要在jsp页面上实现多选功能,比如复选框。提交请求时,所有选中的记录ID会一起发送到Servlet。后台处理时,Servlet需要遍历这些ID,逐一执行删除操作。同样,为确保安全,...

Global site tag (gtag.js) - Google Analytics