js 全选,反选

最新推荐文章于 2024-01-03 10:10:47 发布

转载最新推荐文章于 2024-01-03 10:10:47 发布 · 323 阅读

53 篇文章

订阅专栏


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<input type="checkbox" id="boxId" onclick="selOrNo1()"/>全选/全不选<br/>
	
	<input type="checkbox" name="love" />篮球<br/>
	<input type="checkbox" name="love" />足球<br/>
	<input type="checkbox" name="love" />排球<br/>
	<input type="checkbox" name="love" />冰球<br/>
	
	<input type="button" value="全选" onclick="selAll1()"/>
	<input type="button" value="全不选" onclick="selNo1()"/>
	<input type="button" value="反选" onclick="selOth1()"/>

	
</body>
	
	<script type="text/javascript">

		function test(){
			var ul = document.getElementById("ulid");
			var d2 = document.getElementById("d2");

			var tex = document.createTextNode("aaaaaaa");
			var li = document.createElement("li");
			li.appendChild(tex);
			ul.replaceChild(li,d2);
		}
		function selOrNo1() {
			var box = document.getElementById("boxId");
			if(box.checked == true) {
				selAll1();
			} else {
				selNo1();
			}
		}
		function selAll1() {
			var love = document.getElementsByName("love");
			for(var i=0;i<love.length;i++) {
				var check = love[i];
				check.checked = true;
			}
		}

		function selNo1() {
			var love = document.getElementsByName("love");
			for(var i=0;i<love.length;i++) {
				var check = love[i];
				check.checked = false;
			}
		}

		function selOth1() {
			var love = document.getElementsByName("love");
			for(var i=0;i<love.length;i++) {
				var check = love[i];
				if(check.checked == true) {
					check.checked = false;
				} else {
					check.checked = true;
				}
			}
		}
		/* 
			type="checkbox" 属性checked=true
			* 设置标签的checked属性
			* 获取name名称是love的所有的input标签，返回数组
			* 循环遍历，拿到每一个input标签
			* 设置属性
		*/
		// 全选
		function selAll(){
			// 先获取name名称是love的所有的input标签
			var inputs = document.getElementsByName("love");
			// 循环遍历，拿到每一个input
			for(var i=0;i<inputs.length;i++){
				var input = inputs[i];
				// 设置属性
				input.checked = "checked";
				//input.setAttribute("checked","true");
			}
		}
		
		// 全不选
		function selNo(){
			// 先获取name名称是love的所有的input标签
			var inputs = document.getElementsByName("love");
			// 循环遍历，拿到每一个input
			for(var i=0;i<inputs.length;i++){
				var input = inputs[i];
				// 设置属性
				input.checked = false;
				//input.removeAttribute("checked");
			}
		}
		
		
		// 反选
		function selOth(){
			// 先获取name名称是love的所有的input标签
			var inputs = document.getElementsByName("love");
			// 循环遍历，拿到每一个input
			for(var i=0;i<inputs.length;i++){
				var input = inputs[i];
				// 判断，当前的input标签是否被选中，如果选中，设置false，相反。
				/* if(input.checked == false){
					input.checked = true;
				}else{
					input.checked = false;
				} */
				
				input.checked = !input.checked;
			}
		}
		
		function selOrNo(){
			var box = document.getElementById("boxId");
			if(box.checked == true){
				// 全选
				selAll();
			}else{
				// 全不选
				selNo();
			}
		}
		
	</script>
</html>