Jquery实现全选和全不选

最新推荐文章于 2023-11-14 23:30:08 发布

原创最新推荐文章于 2023-11-14 23:30:08 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一个使用MyJSP实现的简单网页布局案例，其中包括了两个表格元素及利用jQuery进行的选择操作。通过示例代码展示了如何使用jQuery来控制表格中复选框的全选与取消全选功能。

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

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="js/jquery-1.6.1.min.js">
		
	
	</script>
  </head>
  
  <body>
    
    <table id="dataTab">
    <tr>
    	<th>
    		<input type="checkbox"  id="selectCheck" onclick="selectAll();" value="test"/>
    	</th>
    </tr>
    	<tr>
    		<td>
    		<input type="checkbox" name="box" >
    		</td>
    		<td>
				####    		
    		</td>
    		<td>
    		<input type="checkbox" name="box">
    		</td>
    		<td>
				####    		
    		</td><td>
    		<input type="checkbox"  name="box">
    		</td>
    		<td>
				####    		
    		</td>
    	</tr>
    </table>
    
    <hr/>
    
    
     <table id="dataTab_1">
    <tr>
    	<th>
    		<input type="checkbox"  id="selectCheck_1" onclick="selectAll_1();" value="test" checked="false"/>
    	</th>
    </tr>
    	<tr>
    		<td>
    		<input type="checkbox"  >
    		<input type="checkbox"  id="testBox" value="复选框" >
    		</td>
    		<td>
				####    		
    		</td>
    		<td>
    		<input type="checkbox" >
    		</td>
    		<td>
				####    		
    		</td><td>
    		<input type="checkbox">
    		</td>
    		<td>
				####    		
    		</td>
    	</tr>
    </table>
  </body>
</html>

<script>
	function selectAll(){
			//alert($("#selectCheck").attr("checked"));
			$.each($("input[name='box']"),function(){
				if($("#selectCheck").attr("checked")){
				$(this).attr("checked",$("#selectCheck").attr("checked"));
				}
				else{
					$(this).removeAttr("checked");
					}
				});

		}

	function selectAll_1(){
		var isChecked=$("#selectCheck_1").attr("checked");
		$("#dataTab_1 tr:gt(0) :checkbox").each(function(){
				if(isChecked){
					$(this).attr("checked","checked");
			}
			else{
				$(this).removeAttr("checked");
				}
			});

		}


</script>