`
uule
  • 浏览: 6337770 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

js实现的复选框选中时的批量操作

    博客分类:
  • JSP
J# 
阅读更多

1.

var checkedList = [];	// save for all checked  box
var tmpHotel = new Hotel();
tmpHotel.setHotelId("${item.key}");
checkedList[tmpHotel.getHotelId()] = [];  //将每个hotelId对应的行也初始化为一个数组

<td class="htbl_td1_'+tr_border+'">
	<input onclick="modifyCheckedList(\''+ hotels[i].getHotelId() +'\', this, '+ hotels[i].getRooms(rTypeCnt).getInternalId(j) +');" type="checkbox" />
</td>;
 
	//点击每行(room行)的复选框时,将该行对应的internalId放入二维数组checkedList[hotelId][checkedList[hotelId].length] 项中
	function modifyCheckedList(hotelId, chk, internalId) {
		
		if ( chk.checked == true) checkedList[hotelId][checkedList[hotelId].length] = internalId;
		
		for (var i=0; i<checkedList[hotelId].length; i++) {
			if (checkedList[hotelId][i] == internalId) {
       if (chk.checked == true) {
					// Do nothing here
				} else {
					checkedList[hotelId][i] = 0;			
 // remove the internalid form checkedList array
					setDeleteLinkVisible(hotelId);
					setBatchUpdateVisible(hotelId);
					return;
				}
			}
			if (checkedList[hotelId][i] == 0) {
					if (chk.checked == true) { checkedList[hotelId][i] = internalId; }
					setDeleteLinkVisible(hotelId);
					setBatchUpdateVisible(hotelId);
					return;
			}
		}
		setDeleteLinkVisible(hotelId);
		setBatchUpdateVisible(hotelId);
	}
 
	//显示批量操作按钮
	function setBatchUpdateVisible(hotelId) {
		var noTick = true;
		for (var i=0; i<checkedList[hotelId].length; i++) {
			if (parseInt(checkedList[hotelId][i]) != 0) {
				noTick = false;
				break;
			}
		}
		if (noTick == true) {
			$("batchUpdateLink" + hotelId).style.display = "none";
		} else {
			$("batchUpdateLink" + hotelId).style.display = "";
		}	
	}
 
	//点击批量操作按钮
	//从checkedList[hotelId][..]中读取选中的复选框项,将每行对应的internalId放入一个String类型的变量updateList中,格式如 95599,96887,77845
	//在Java类中分割即可获得选中的复选框项,如:String[] tariffIdArr = request.getParameter("updateList").split(",");
	function doBatchUpdate(hotelId) {	
		if (checkedList[hotelId].length == 0) return;
		var noTick = true;
		for (var i=0; i<checkedList[hotelId].length; i++) {
			if (parseInt(checkedList[hotelId][i]) != 0) { noTick = false; break; }
		}
		if (noTick == true) { return; }
		if(!confirm("Do you confirm update?")) return;
		
		var updateList = "";
		for(var i=0; i<checkedList[hotelId].length-1; i++) {
			updateList += checkedList[hotelId][i] + ",";
		}
		updateList += checkedList[hotelId][checkedList[hotelId].length-1];
		var url = "<%=basePath%>tariffBatchUpdate.do?hotelId="+hotelId+"&timeStamp=" + new Date().getTime();
		var formBatchUpdate = document.createElement("FORM"); //创建一个form
		formBatchUpdate.setAttribute("action", url);
		formBatchUpdate.setAttribute("method","post");
		var updateListInput = document.createElement("input"); //创建一个input表单
		updateListInput.setAttribute("name","updateList");
		updateListInput.setAttribute("type","hidden");
		updateListInput.setAttribute("value",updateList);
		formBatchUpdate.appendChild(updateListInput);   //将表单加入Form中
		document.body.appendChild(formBatchUpdate);     //将Form加入body中
		formBatchUpdate.submit();
	}

 11

分享到:
评论

相关推荐

    javascript复选框实现批量选择

    JavaScript 复选框实现批量选择 在开发过程中,经常会遇到对查询列表中的记录进行批量操作的情况,例如批量删除、批量编辑等。实现这种批量选择的方法往往是使用 JavaScript,通过在每条记录前面加一个复选框,然后...

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

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

    复选框选中表格中的行进行删除行操作

    总的来说,"复选框选中表格中的行进行删除行操作"是一个综合性的功能,涉及到前端交互设计、数据绑定、事件处理、DOM操作等多个方面,需要结合HTML、CSS和JavaScript的知识来实现。在实际开发中,我们还需要关注用户...

    CheckBox分级选中 复选框 上下级 联动

    此外,为了优化用户体验,我们还可以添加一些辅助功能,比如禁用父级复选框的选中状态,直到所有子级复选框的状态都已知,或者在选中/取消选中父级复选框时,提供批量操作的动画效果。 在实际项目中,我们可能会...

    复选框的左右移动

    6. **优化用户体验**:为了提高可用性,可以添加批量移动功能,比如选择多个复选框后一次性移动。还可以添加防止重复选择的机制,避免用户误操作。 7. **代码组织**:为了保持代码整洁,可以将复选框移动逻辑封装成...

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

    在JavaServer Pages (JSP) 开发中,常常需要实现用户界面中的批量选择功能,比如在列表中通过复选框来选中多个项目。本文将详细介绍如何在JSP中实现这样的功能,主要涉及HTML、JavaScript 和后端Java的交互。 首先...

    带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选

    在IT领域,尤其是在前端开发中,构建用户界面时经常需要处理多级目录树结构,并且在这样的结构中加入复选框功能,以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

    判断复选框的选择状态

    1. **全选复选框**:当用户点击全选复选框时,你需要遍历所有子复选框,并将它们的选中状态设置为与全选复选框相同。同时,也要更新全选复选框的选中状态,以反映当前所有子项是否都被选中。 2. **子复选框**:对于...

    gridview添加复选框批量操作代码

    总结,这个示例展示了如何在GridView中添加复选框,并利用JavaScript实现全选/全不选功能,以及在后台处理批量删除操作。在实际开发中,还需要考虑用户体验、数据验证、错误处理和安全性等多个方面,以构建健壮的...

    jquery复选框全选操作

    在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...

    JS实现复选框的全选和批量删除功能

    在JavaScript(JS)中,实现复选框的全选和批量删除功能是常见的前端交互需求,尤其是在电商网站或管理系统中。下面将详细讲解如何通过JS实现这两个功能。 首先,我们来看全选功能的实现。全选功能通常由一个主复选...

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

    本文将详细介绍如何在JSP页面中通过复选框实现批量删除功能,包括前端JavaScript脚本和后端处理逻辑。 #### 二、前端JS脚本设计 ##### 2.1 功能概述 前端JavaScript脚本的主要任务是处理用户界面的选择行为,并将...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中,购物车模块是用户进行商品选购时的重要组成部分。其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    带复选框(checkbox)的树

    在IT界,"带复选框(checkbox)的树"是一种常见的用户界面元素,它将树形结构的数据与复选框相结合,为用户提供了一种直观、便捷的方式来选择、操作和组织层次化的数据。这种控件通常用于文件管理器、设置菜单、数据库...

    jquery复选框选中按钮.rar

    本资源“jquery复选框选中按钮.rar”似乎包含了一个关于如何使用jQuery来控制复选框(checkbox)状态的示例,特别是与按钮(button)交互的情景。在网页开发中,复选框和按钮是常见的表单元素,用于收集用户输入或...

    Js实现复选框的全选、全不选反选功能代码实例

    在网页开发中,经常需要实现复选框(checkbox)的全选、全不选以及反选功能,以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript(Js)实现这一功能,并提供一个具体的代码实例。 首先,我们需要了解复...

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中,我们将探讨如何利用JavaScript实现对复选框(checkbox)的全选、反选功能,并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    超炫的复选框效果源码

    6. **事件处理**:使用JavaScript或者jQuery处理复选框的点击事件,可能包括批量选中、反选等功能,增加复选框的实用性。 7. **复选框组**:在网格布局中,可能会有多个复选框组成一个组,实现联动或互斥的效果,...

    全选反选复选框JS实现

    - 当某个复选框状态改变时,检查当前是否所有复选框都被选中,如果是,则全选复选框应该被选中;反之,如果至少有一个未被选中,全选复选框应取消选中。 4. **代码实现**: - `全选反选_按钮.js`这个文件很可能...

Global site tag (gtag.js) - Google Analytics