JavaScript经典案例：复选框多选操作

旧城等待， 2022-11-20 01:59 289阅读 0赞

效果展示：

![在这里插入图片描述][20201121164401950.jpg_pic_center]

HTML代码

<form action="" method="post">
    	<table border="0" cellpadding="8px" cellspacing="8px">
    		<th>
    		<td colspan="2">请选择您喜欢的歌手！</td>
    		<td><input type="checkbox" id="checkAllBox" />全选/取消全选</td>
    		</th>
    		<tr>
    			<td><input type="checkbox" name="items" value="李荣浩" />李荣浩</td>
    			<td><input type="checkbox" name="items" value="谢霆锋" />谢霆锋</td>
    			<td><input type="checkbox" name="items" value="李宇春" />李宇春</td>
    			<td><input type="checkbox" name="items" value="李健" />李健</td>
    		</tr>
    		<tr>
    			<td><input type="button" id="checkAllBtn" value="全    选" /></td>
    			<td><input type="button" id="checkNoBtn" value="取消全选" /></td>
    			<td><input type="button" id="checkRevBtn" value="反 选" /></td>
    			<td><input type="button" id="sendBtn" value="提 交" /></td>
    		</tr>
    	</table>
    </form>

JavaScript代码：

<script type="text/javascript">
    	window.onload = function() {
    		var items = document.getElementsByName("items"); // 获取多选框子项
    
    		// 开关全选复选框
    		document.getElementById("checkAllBox").onclick = function() {
    			for (var i = 0; i < items.length; i++) {
    				items[i].checked = this.checked;
    			}
    		} // 开关全选复选框结束
    
    		// 全选按钮
    		document.getElementById("checkAllBtn").onclick = function() {
    			for (var i = 0; i < items.length; i++) {
    				items[i].checked = true;
    			}
    			document.getElementById("checkAllBox").checked = true;
    		} // 全选按钮结束
    
    		// 取消全选
    		document.getElementById("checkNoBtn").onclick = function() {
    			for (var i = 0; i < items.length; i++) {
    				items[i].checked = false;
    			}
    			document.getElementById("checkAllBox").checked = false;
    		} // 取消全选结束
    
    		// 反向选取
    		document.getElementById("checkRevBtn").onclick = function() {
    			document.getElementById("checkAllBox").checked = true;
    			for (var i = 0; i < items.length; i++) {
    				items[i].checked = !items[i].checked;
    				if (!items[i].checked) {
    					document.getElementById("checkAllBox").checked = false;
    				}
    			}
    		} // 反向选取结束
    
    		// 提交
    		document.getElementById("sendBtn").onclick = function() {
    			for (var i = 0; i < items.length; i++) {
    				if (items[i].checked == true) {
    					alert(items[i].value);
    				}
    			}
    		} // 提交结束
    
    		// 优化全选/取消全选
    		for (var i = 0; i < items.length; i++) {
    			items[i].onclick = function() {
    				document.getElementById("checkAllBox").checked = true;
    				for (var j = 0; j < items.length; j++) {
    					if (!items[j].checked) {
    						document.getElementById("checkAllBox").checked = false;
    						break; // 只要有一项未选中则取消全选
    					}
    				}
    			};
    		} // 优化全选/取消全选结束
    	}
    </script>

[20201121164401950.jpg_pic_center]: /images/20221120/9a76d01db13a456fb395416c478fe26f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript复选框列表操作技巧

在网页设计中，使用复选框是非常常见的操作。复选框可以让用户选择多个选项，经常被用于表单中。但是，在JavaScript中，对于复选框的操作也非常重要。本文将介绍一些JavaSc

喜欢ヅ旅行/ 2023年10月13日 17:51/ 0 赞/ 36 阅读

相关 JavaScript经典案例：复选框多选操作

效果展示： ![在这里插入图片描述][20201121164401950.jpg_pic_center] HTML代码 <form action="" metho

旧城等待，/ 2022年11月20日 01:59/ 0 赞/ 290 阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 279 阅读

相关 JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和[操作radio][radio]的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元

系统管理员/ 2022年08月07日 06:53/ 0 赞/ 298 阅读

相关 js 复选框的多选反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

r囧r小猫/ 2022年06月15日 12:50/ 0 赞/ 283 阅读

相关 js_案例_复选框全选功能

复选框全选功能 <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label>

ゝ一世哀愁。/ 2022年05月25日 05:47/ 0 赞/ 221 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 277 阅读

相关 JavaScript_之复选框

UI界面样式 HTML界面实现代码 <!DOCTYPE html>： <html> <head> <srcipt type="text/

向右看齐/ 2022年05月01日 12:56/ 0 赞/ 271 阅读

相关 JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做

落日映苍穹つ/ 2022年01月13日 07:19/ 0 赞/ 458 阅读

相关 JavaScript 复选框全选功能案例

功能描述实现一个多栏目复选框的全选，全不选和反选功能。 ![在这里插入图片描述][20190418123707102.png] 分析 HTML页面：四

Love The Way You Lie/ 2021年06月24日 16:10/ 0 赞/ 530 阅读