当前位置:首页 >> 前端

用JavaScript实现_全选_反选_全不选操作

  • 前端
  • 2020-08-20 09:34:42
  • 人已阅读
简介用JavaScript实现_全选_反选_全不选操作

用JavaScript实现_全选_反选_全不选操作

<!-- 全选 反选 全不选 例子: -->
<script>
	//document.getElementById(id);	//通过元素中唯一的id
	//document.getElementsByName(name);//通过元素中的name属性
	//document.getElementsByTagName(tagname);//通过元素中的标签名称
	/* id的方式,一个文档中id是唯一的,而name和标签名称可以是多个*/
</script>

<body>
	<form>
		<label for="one"><input onclick="cqc(this)" type="checkbox" id="one">全选</label>
		<ul>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
			<li><input type="checkbox" name="sel[]" value="1">获取多个数据</li>
		</ul>
	</form>
	<a href="javascript:qx()">全选</a>/
	<a href="javascript:fx()">反选</a>/
	<a href="javascript:qbx()">全不选</a>/
</body>

<script>
	//通过名字属性name可以将同名的元素获取到
	var objs = document.getElementsByName("sel[]");
	
	function qx(){
		for(var i=0; i<objs.length; i++){
			objs[i].checked=true;
		}
	}
	
	function fx(){
		for(var i=0; i<objs.length; i++){
			if(objs[i].checked==true){
				objs[i].checked=false;
			}else{
				objs[i].checked=true;
			}
		}
	}
	
	function qbx(){
		for(var i=0; i<objs.length; i++){
			objs[i].checked=false;
		}
	}
	
	
	function cqc(obj){
		//obj就是this,而这个this写在input type="checkbox"中
		for(var i=0; i<objs.length; i++){
			objs[i].checked=obj.checked;
		}
	}

</script>
Top