设置全选，全不选，全选/全不选按钮代码

最新推荐文章于 2023-02-15 23:56:27 发布

悲催的程序猿!

最新推荐文章于 2023-02-15 23:56:27 发布

阅读量203

点赞数 1

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_57347212/article/details/118556203

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function(){
				//获取全选按钮
				var checkall = document.getElementById("checkall");
				checkall.onclick = function(){
					//获取所有的复选框
					var items = document.getElementsByName("items");
					//为每个复选框的设置为选中
					for(var i = 0;i<items.length;i++){
						items[i].checked = true;
					}
				}
			}
			function checkAllNo(){
				//获取所有的复选框
				var items = document.getElementsByName("items");
				//为每个复选框的设置为选中
				for(var i = 0;i<items.length;i++){
					items[i].checked = false;
			}
			}
			function check_revsern(){
				//获取所有的复选框
				var items = document.getElementsByName("items");
				//为每个复选框的设置为选中
				for(var i = 0;i<items.length;i++){
					//进行判断
					/* if (items[i].checked == true;) {
						items[i].checked = false;
					} else{
						items[i].checked = true;
					} */
					items[i].checked = !items[i].checked;
			}
			}
			function check_all(){
				//获取所有的复选框
				var items = document.getElementsByName("items");
				//获取全选/全不选的id
				var _input = document.getElementById("input");
				//设置复选框的checked的值和全选/全不选的checked的值一样
			
					for(var i = 0;i<items.length;i++){
						items[i].checked = _input.checked;
						}
				
		
		
			}
		</script>
	</head>
	<body>
		<input type="checkbox" id="input" onclick="check_all()">全选/全不选<br>
		<input type="checkbox" name="items" value="足球">足球<br>
		<input type="checkbox" name="items" value="篮球">篮球<br>
		<input type="checkbox" name="items" value="游泳">游泳<br>
		<input type="checkbox" name="items" value="唱歌">唱歌<br>
		<br>
		<input type="button" name="checkall" id="checkall" value="全选">
		<input type="button" name="checkall" id="checkallNo" value="全不选" onclick="checkAllNo()">
		<input type="button" name="checkall" id="check_revsern" value="反选" onclick="check_revsern()">
	</body>
</html>