zoukankan      html  css  js  c++  java
  • 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>
    

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

  • 相关阅读:
    MySql 数据备份与还原
    PHP 连接数据库
    迭代法写线性回归
    ML numpy、pandas、matplotlib的使用
    005 动态加载实例
    爬虫实现案例
    004 使用scrapy框架爬虫
    003 爬虫持久化的三个不同数据库的python代码
    内置函数和匿名函数
    迭代器和生成器
  • 原文地址:https://www.cnblogs.com/yu011/p/13642409.html
Copyright © 2011-2022 走看看