js实现全选和全不选

最新推荐文章于 2023-05-15 18:21:17 发布

T暴风雪

最新推荐文章于 2023-05-15 18:21:17 发布

阅读量1.9k

点赞数

分类专栏： JQ 程序人生文章标签：全选 js全选

本文链接：https://blog.csdn.net/T_Struggle/article/details/89228299

版权

JQ 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

程序人生

11 篇文章 0 订阅

订阅专栏

非常简洁的几行原生js实现全选和全不选，大神们可以在此基础上加上反选功能啊^^

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选、全不选</title>
</head>
<body>
<table border="1">
	<tr>
		<td><input type="checkbox" name="mmAll" onclick="All(this, 'mm[]')"></td>
	</tr>
	<tr><td><input type="checkbox" value="1" name="mm[]" class="check" id="ids1" onclick="Item(this, 'mmAll')"></td></tr>
	<tr><td><input type="checkbox" value="2" name="mm[]" class="check" id="ids2" onclick="Item(this, 'mmAll')"></td></tr>
	<tr><td><input type="checkbox" value="3" name="mm[]" class="check" id="ids3" onclick="Item(this, 'mmAll')"></td></tr>
	<tr><td><input type="checkbox" value="4" name="mm[]" class="check" id="ids4" onclick="Item(this, 'mmAll')"></td></tr>
	<tr><td><input type="checkbox" value="5" name="mm[]" class="check" id="ids5" onclick="Item(this, 'mmAll')"></td></tr>
	<tr><td><input type="checkbox" value="6" name="mm[]" class="check" id="ids6" onclick="Item(this, 'mmAll')"></td></tr>
</table>
</body>
</html>
<script type="text/javascript">
	//Check all
	function All(e, itemName)
	{
	    var aa = document.getElementsByName(itemName);
	    for (var i=0; i < aa.length; i++)

	        aa[i].checked = e.checked; //得到那个总控的复选框的选中状态  
	}

	//Single select
	function Item(e, allName)
	{
	    var all = document.getElementsByName(allName)[0];
	    if(!e.checked) all.checked = false;
	    else
	    {
	        var aa =document.getElementsByName(e.name);
	        for (var i=0; i<aa.length; i++)
	            if(!aa[i].checked) return;
	        all.checked= true;
	    }
	}
</script>

T暴风雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现全选和全不选

非常简洁的几行原生js实现全选和全不选，大神们可以在此基础上加上反选功能啊^^<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全选、全不选</title></head><body><table border...
复制链接

扫一扫