zoukankan      html  css  js  c++  java
  • js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选

    	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<title>js实现复选框全选/全不选/反选</title>
    	<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		//反选
    		function toggle() {
    			//得到所有标签名为input的元素
    			var y = document.getElementsByTagName("input");
    			alert(y.length);
    			//循环出每个元素
    			for(var i = 0; i < y.length; i++) {
    				//如果元素的类型为checkbox,就反选
    				if(y[i].type == "checkbox") {
    					y[i].checked = !y[i].checked;
    				}
    			}
    		}
    
    		//全选
    		function selAll() {
    			//得到所有标签名为input的元素
    			var y = document.getElementsByTagName("input");
    			alert(y.length);
    			//循环出每个元素
    			for(var i = 0; i < y.length; i++) {
    				//如果元素的类型为checkbox,就全选
    				if(y[i].type == "checkbox") {
    					y[i].checked = true;
    				}
    			}
    		}
    
    		//全不选
    		function noselAll() {
    			//得到所有标签名为input的元素
    			var y = document.getElementsByTagName("input");
    			alert(y.length);
    			//循环出每个元素
    			for(var i = 0; i < y.length; i++) {
    				//如果元素的类型为checkbox,就全不选
    				if(y[i].type == "checkbox") {
    					y[i].checked = false;
    				}
    			}
    		}
    	</script>
    </head>
    
    <body>
    	<form>
    		爱好:
    		<input type="checkbox" value="读书" />读书
    		<input type="checkbox" value="唱歌" />唱歌
    		<input type="checkbox" value="跳舞" />跳舞
    		<input type="checkbox" value="聊天" />聊天
    		<input type="checkbox" value="看电影" />看电影
    		<input type="button" value="全选" onclick="selAll();" />
    		<input type="button" value="全不选" onclick="noselAll();" />
    		<input type="button" value="反选" onclick="toggle();" />
    	</form>
    </body>
    
    	</html>
  • 相关阅读:
    [LeetCode] 64. 最小路径和 ☆☆☆(动态规划)
    [LeetCode] 62. 不同路径 ☆☆☆(动态规划)
    [LeetCode] 25. K 个一组翻转链表 ☆☆☆☆☆(链表)
    jquery validate 多种使用方式
    javascript 闭包学习
    javascript prototype学习
    jquery中event对象属性与方法小结
    html5获取地理位置信息
    thinkphp 构建子查询
    mongodb gridfs基本使用
  • 原文地址:https://www.cnblogs.com/renxiuxing/p/10043465.html
Copyright © 2011-2022 走看看