借助js实现选择框的全选和反选以及取消操作

鳄鱼君Ba

发表文章数:514

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » 借助js实现选择框的全选和反选以及取消操作

我们今天这篇文章,要做的就是实现选择框的全选和反选操作,这里相信你在很多网站都见到过,特别是一些控制台会让你选择文件进行操作,大致就是下图的样式,我们可以简单仿照一下:

借助js实现选择框的全选和反选以及取消操作

主要就是借助checkbox,没有选中就是checkbox对象.checked=false,选中就是checkbox对象.checked=true,我们来简单实现一些,通过最麻烦的办法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>选择框的全选和反选以及取消演示</title>
</head>
<body>
	<input  type="submit" value="全选" onclick="Allcheck();">
	<input type="submit" value="取消" onclick="Cancle();">
	<input  type="submit" value="反选" onclick="Reverse();">
<table class="reference">
	<thead>
		<tr >
			<td><input id="box" type="checkbox" ></td>
			<th>文件</th>
			<th>大小</th>
			<th>修改时间</th>
		</tr>
	</thead>
	<tbody id="che" >
		<tr><td><input type="checkbox" ></td>
			<td>www.e1yu.com</td>
			<td>2M</td>
			<td>2020-4-18</td>
		</tr>
		<tr>
			<td><input type="checkbox" ></td>
			<td>www.e1yu.com</td>
			<td>2M</td>
			<td>2020-4-18</td>
		</tr>
		<tr>
			<td><input type="checkbox" ></td>
			<td>www.e1yu.com</td>
			<td>2M</td>
			<td>2020-4-18</td>
		</tr>
		<tr>
			<td><input type="checkbox" ></td>
			<td>www.e1yu.com</td>
			<td>2M</td>
			<td>2020-4-18</td>
		</tr>
		<tr>
			<td><input type="checkbox" ></td>
			<td>www.e1yu.com</td>
			<td>2M</td>
			<td>2020-4-18</td>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
		function Allcheck(){
			var tb=document.getElementById('che');
			var tr_list=tb.children; //获取table的子标签
			for (var i=0; i<tr_list.length;  i++) {
				var tr=tr_list[i];  //循环所有的tr
				var che=tr.children[0].children[0];
				che.checked=true;
			}}
		function Cancle(){
			var tb=document.getElementById('che');
			var tr_list=tb.children; //获取table的子标签
			for (var i=0; i<tr_list.length;  i++) {
				var tr=tr_list[i];  //循环所有的tr
				var che=tr.children[0].children[0];
				che.checked=false;
			}}
		function Reverse(){
			var tb=document.getElementById('che');
			var tr_list=tb.children; //获取table的子标签
			for (var i=0; i<tr_list.length;  i++) {
				var tr=tr_list[i];  //循环所有的tr
				var che=tr.children[0].children[0];
				if (che.checked){
					che.checked=false;
				}else{
					che.checked=true;
				}
			}}
</script>
</body>
</html>

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《借助js实现选择框的全选和反选以及取消操作》 发布于2020-04-18

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

1 + 5 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册