原生js实现全选反选全不选

代码如下
<!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=UTF-8">
	<title>checkbox练习</title>
	</head>
	<body>

		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			
		</form>

		<script>
		    var checkedAllBtn = document.getElementById("checkedAllBtn")
			var items = document.getElementsByName("items")
			var checkedAllBox = document.getElementById("checkedAllBox")
			//全选
			checkedAllBtn.onclick = function () {
				for (var i = 0; i < items.length;i++){
					items[i].checked = true
				}
				checkedAllBox.checked = true
			}

			//全不选
			var checkedNoBtn = document.getElementById("checkedNoBtn")
			checkedNoBtn.onclick = function () {
				for (var i = 0; i < items.length;i++){
					items[i].checked = false
				}
				checkedAllBox.checked = false
			}

			//反选
			var checkedRevBtn = document.getElementById("checkedRevBtn")
			checkedRevBtn.onclick = function () {
				checkedAllBox.checked = true

				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
					if (items[i].checked == false){
						checkedAllBox.checked = false
					}


				}
			}

			//全选复选框
			checkedAllBox.onclick = function () {
				for (var i = 0; i < items.length; i++){
					items[i].checked = this.checked
				}
			}

			
			for (var i = 0; i < items.length; i++){
				items[i].onclick = function () {
					checkedAllBox.checked = true


					for (var j = 0; j< items.length;j++){
						if (items[j].checked == false){
							checkedAllBox.checked = false
						}

						// if (items[j].checked == true){
						// 	checkedAllBox.checked = true
						// }else{
						// 	checkedAllBox.checked = false
						// }
					}
				}
			}






		</script>
	</body>
</html>
原生js实现全选反选全不选

猜你喜欢
