js实现复选框的全选及反选

界面如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<input type="checkbox" name="fruit" value="1">选项1<br/>
		<input type="checkbox" name="fruit" value="1">选项2<br/>
		<input type="checkbox" name="fruit" value="1">选项3<br/>
		<input type="checkbox" name="fruit" value="1">选项4<br/>
		<button type="button" onclick="selectAll()">全选</button>
		<button type="button" onclick="unSelectAll()">全不选</button>
		<button type="button" onclick="converSelectAll()">反选</button>
		<script type="text/javascript">
			var getall = document.getElementsByTagName("input");

			function selectAll() {
				for(var i = 0; i < getall.length; i++) {
					getall[i].checked = true;
				}
			}

			function unSelectAll() {
				for(var i = 0; i < getall.length; i++) {
					getall[i].checked = false;
				}
			}

			function converSelectAll() {
				for(var i = 0; i < getall.length; i++) {
					if(getall[i].checked) {
						getall[i].checked = false;
					} else {
						getall[i].checked = true;
					}
				}
			}
		</script>
	</body>

</html>

js实现复选框的全选及反选

悦读