JSP页面使用JS控制checkbox实现全选功能

主要功能:

1、选择行标题的复选框(checkbox)会对列表页面的其他复选框进行相应的全选中和全不选中

2、选择表格中的复选框,根据表格中的复选框是否全部被选中,确定标题行的复选框是否是选中状态

功能实现代码如下:

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
//全选/全不选
function funCheckAll(obj){
	var items = document.getElementsByTagName("input");
	for(var i=0;i<items.length;i++){
		if(items[i].type=="checkbox"&& items[i].name=="checkSel")
			items[i].checked = obj.checked;
	}
}
//普通复选框脚本
function funCheck(){
	var flg = true;
	var items = document.getElementsByTagName("input");
	for(var i=0;i<items.length;i++){
		if(items[i].type=="checkbox"&& items[i].name=="checkSel"){
			if(!items[i].checked){
				flg = false;
				break;
			}
		}
	}
	document.getElementById("cbSelectAll").checked= flg;
}
</script>
</head>
<body>
<table border="1">
	<tr>
		<th><input type="checkbox" id='cbSelectAll' οnclick="funCheckAll(this);"></th>
		<th>标题</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name='checkSel' οnclick="funCheck()">
		</td>
		<td>1</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name='checkSel' οnclick="funCheck()">
		</td>
		<td>2</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name='checkSel' οnclick="funCheck()">
		</td>
		<td>3</td>
	</tr>
	
</table>
</body>
</html>

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP实现复选框的全选与反选,可以通过 JavaScript实现。以下是一个简单的示例代码: ```html <html> <head> <script type="text/javascript"> function checkAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function uncheckAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } function invertSelection() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <form> <input type="checkbox" name="checkbox" value="1">选项1 <input type="checkbox" name="checkbox" value="2">选项2 <input type="checkbox" name="checkbox" value="3">选项3 <br> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="invertSelection()"> <input type="button" value="全不选" onclick="uncheckAll()"> </form> </body> </html> ``` 在这个例子中,我们使用JavaScript实现三个函数:`checkAll()`、`uncheckAll()` 和 `invertSelection()`。这些函数分别对应“全选”、“全不选”和“反选”按钮的点击事件。 `document.getElementsByName('checkbox')` 通过 name 属性获取所有复选框的 DOM 对象,然后使用循环遍历每个复选框,来实现全选、全不选和反选的功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值