zoukankan      html  css  js  c++  java
  • jQuery选中该复选框来实现/全部取消/未选定/获得的选定值

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		// 全选/取消所有
    		$("#checkAllChange").click(function() {
    			if (this.checked == true) {
    				$(".userid").each(function() {
    					this.checked = true;
    				});
    			} else {
    				$(".userid").each(function() {
    					this.checked = false;
    				});
    			}
    		});
    		// 全选
    		$("#checkAll").click(function() {
    			$(".userid").each(function() {
    				this.checked = true;
    			});
    		});
    		// 取消所有
    		$("#removeAll").click(function() {
    			$(".userid").each(function() {
    				this.checked = false;
    			});
    		});
    		// 反选
    		$("#reverse").click(function() {
    			$(".userid").each(function() {
    				if (this.checked == true) {
    					this.checked = false;
    				} else {
    					this.checked = true;
    				}
    			})
    		});
    		//批量删除
    		$("#delAll").click(function() {
    			var arrUserid = new Array();
    			$(".userid").each(function(i) {
    				if (this.checked == true) {
    					arrUserid[i] = $(this).val();
    				}
    			});
    			alert("批量删除的:" + arrUserid);
    		});
    	});
    </script>
    </head>
    
    <body>
    	<table border="1">
    		<tr>
    			<td><input type="checkbox" id="checkAllChange" /></td>
    			<td>用户id</td>
    			<td>username</td>
    			<td>电话</td>
    			<td>地址</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" class="userid" value="1" /></td>
    			<td>1</td>
    			<td>wangzs1</td>
    			<td>18888000</td>
    			<td>浦东</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" class="userid" value="2" /></td>
    			<td>2</td>
    			<td>wangzs2</td>
    			<td>18888001</td>
    			<td>上海</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" class="userid" value="3" /></td>
    			<td>3</td>
    			<td>wangzs3</td>
    			<td>18888002</td>
    			<td>河南</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" class="userid" value="4" /></td>
    			<td>4</td>
    			<td>wangzs4</td>
    			<td>18888003</td>
    			<td>许昌</td>
    		</tr>
    		<tr>
    			<td></td>
    			<td><input type="button" id="checkAll" value="全选" /></td>
    			<td><input type="button" id="removeAll" value="取消所有" /></td>
    			<td><input type="button" id="reverse" value="反选" /></td>
    		</tr>
    		<tr>
    			<td colspan="4" align="center"><input type="button" value="批量删除" id="delAll"></td>
    		</tr>
    	</table>
    </body>
    
    </html>

    版权声明:本文博客原创文章。博客,未经同意,不得转载。

  • 相关阅读:
    我的Asp.Net Hello World程序

    快速排序
    Python是一门什么样的语言
    Python开发简介
    LVS(Linux Viretual Server) 负载均衡器 + 后端服务器
    易迷糊题
    python语言入门 第四天
    日常练习 1.0
    User_Login_Register_Shopping 1.0
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4748931.html
Copyright © 2011-2022 走看看