js实现同名checkbox的全选/全取消和反选

最新推荐文章于 2019-07-15 11:32:30 发布

抓住梦想

最新推荐文章于 2019-07-15 11:32:30 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/kaidishi/article/details/17750387

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用JavaScript实现一组具有相同name属性的复选框（checkboxes）的全选、全取消和反选功能。通过监听复选框的状态变化，动态更新其他复选框的选中状态，实现批量操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script language="javascript">
	function fun1(obj){
		var checkboxs = document.getElementsByName("checkboxName");	
		for(var i=0; i<checkboxs.length ; i++){
			var ck =  checkboxs[i];
			if(obj.checked == true){
				ck.checked = true;
			}else{
				ck.checked = false;
			}
		}
	}
	
	function fun2(obj){
			if(obj.checked == false){
				return false;
			}
			var checkboxs = document.getElementsByName("checkboxName");
			for(var i=0; i<checkboxs.length ; i++){
				var ck =  checkboxs[i];
				ck.checked = !ck.checked;		
			}
	}
</script>

<table>
	<tr><td><input type="checkbox" onclick="fun1(this)" />全选/取消</td></td><td><input type="checkbox" onclick="fun2(this)" />反选</td></tr>
    <tr><td><input type="checkbox" name="checkboxName"/></td><td colspan="2"></td></tr>
    <tr><td><input type="checkbox" name="checkboxName"/></td><td colspan="2"></td></tr>
    <tr><td><input type="checkbox" name="checkboxName"/></td><td colspan="2"></td></tr>
    <tr><td><input type="checkbox" name="checkboxName"/></td><td colspan="2"></td></tr>
</table>