• 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>
    

    点击全部选中:
    在这里插入图片描述
    取消苹果选项(全部选中复选框自动取消):
    在这里插入图片描述
    再将苹果勾选上(全部选中自动勾选):
    在这里插入图片描述

  • 相关阅读:
    URAL 1658. Sum of Digits(DP)
    HDU 4433 locker(SPFA+DP)
    Vijos 1092 全排列
    POJ 1141 Brackets Sequence(DP)
    HDU 4597 Play Game
    HDU 1693 Eat the Trees(插头DP)
    USACO 5.4 Twofive(DP)
    USACO 5.5 Hidden Password(搜索+优化)
    USACO 5.5 Picture(周长并)
    USACO 5.4 Telecowmunication(最大流+枚举)
  • 原文地址:https://www.cnblogs.com/yu011/p/13642409.html
Copyright © 2020-2023  润新知