实现全选和取消全选（JavaScript控制CheckBox 的全选与取消全选）

最新推荐文章于 2023-07-11 22:34:21 发布

原创最新推荐文章于 2023-07-11 22:34:21 发布 · 861 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #javascript #function #jsp全选

java 同时被 3 个专栏收录

40 篇文章

订阅专栏

jsp

2 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

本文介绍了一个简单的网页表格中实现全选与取消全选功能的方法。通过JavaScript操作DOM元素来完成对复选框的选择状态控制。适用于需要批量操作选项的场景。

示例：


<html>
  <head>
     
	<script type="text/javascript">
		
	//全选
	function checkAll(name)
	{
	    var el = document.getElementsByTagName('input');
	    var len = el.length;
	    for(var i=0; i<len; i++)
	    {
	        if((el[i].type=="checkbox") && (el[i].name==name))
	        {
	            el[i].checked = true;
	        }
	    }
	}
	
	//取消全选
	function clearAll(name)
	{
	    var el = document.getElementsByTagName('input');
	    var len = el.length;
	    for(var i=0; i<len; i++)
	    {
	        if((el[i].type=="checkbox") && (el[i].name==name))
	        {
	            el[i].checked = false;
	        }
	    }
	}
            
    }
</script>
  </head>
  
  <body>
   <table border="1" width="70%">
   	<tr>
   		<td>
   			<input type="checkbox" name="checkAll" onclick="if(this.checked==true) { checkAll('ids'); } else { clearAll('ids'); }" />
   		</td>
   		<td>id</td>
   		<td>name</td>
   		<td>address</td>
   		<td>删除</td>
   		<td>修改</td>
   	</tr>
   	<c:forEach items="${persons}" var="p">
	   	<tr>
	   		<td><input type="checkbox" name="ids" value="${p.id }"></td>
	   		<td>${p.id }</td>
	   		<td>${p.name }</td>
	   		<td>${p.address }</td>
	   		<td><input type="button" value="删除" onclick="del('${p.id }')"></td>
	   		<td><a href="<%=path %>/person/updatePersonUI?id=${p.id }">修改</a></td>
	   	</tr>
   	</c:forEach>
   </table>
  </body>
</html>