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

最新推荐文章于 2024-04-07 09:49:21 发布

skylar_

最新推荐文章于 2024-04-07 09:49:21 发布

阅读量788

点赞数

分类专栏： java jsp javascript 文章标签： checkbox javascript function jsp全选

本文链接：https://blog.csdn.net/u011329762/article/details/37934603

版权

java 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

jsp

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

示例：


<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" οnclick="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="删除" οnclick="del('${p.id }')"></td>
	   		<td><a href="<%=path %>/person/updatePersonUI?id=${p.id }">修改</a></td>
	   	</tr>
   	</c:forEach>
   </table>
  </body>
</html>