JS之復選框的全選和取消全選


1、復選框id.checked
可獲取復選框的選中狀態(true / false)
2、getElementsByName("name")
根據name獲取所有元素

代碼示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    </head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var allCheck = document.getElementById("allCheck");
				//根據name獲取所有元素
				var fruits = document.getElementsByName("fruit");
				//給allCheck復選框綁定onclick事件
				allCheck.onclick = function(){
					//獲取allCheck復選框的選中狀態(返回true/false)
					var checkState = allCheck.checked;
					for (var i = 0; i < fruits.length; i++) {
						//將allCheck復選框的狀態傳給每一個fruit
						fruits[i].checked = checkState;
					}
				}
				/*fruit全部選中時將allCheck也選中*/
				//fruit的總數量
				var all = fruits.length;
				for (var i = 0; i < fruits.length; i++) {
					fruits[i].onclick = function(){
						var checkedCount = 0;
						//總數量和選中數量相等時將allCheck選中
						for (var i = 0; i < fruits.length; i++) {
							if(fruits[i].checked){
								checkedCount++;
							}
						}
						//相等時返回true,不相等時返回false
						allCheck.checked = (all == checkedCount);
					}
				}
			}
		</script>
		<input type="checkbox" id="allCheck" />全部選中<br /><br />
		<input type="checkbox" name="fruit" value="apple" />蘋果<br />
		<input type="checkbox" name="fruit" value="banana" />香蕉<br />
		<input type="checkbox" name="fruit" value="pear" />梨<br />
	</body>
</html>

點擊全部選中:
在這里插入圖片描述
取消蘋果選項(全部選中復選框自動取消):
在這里插入圖片描述
再將蘋果勾選上(全部選中自動勾選):
在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM