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>

查看全文
  • 相关阅读:
    SQL Sever语言 存储过程及触发器
    计蒜客 挑战难题 移除数组中的重复元素
    projecteuler Sum square difference
    码农谷 求前N项之和
    projecteuler Smallest multiple
    计蒜客 挑战难题 寻找插入位置
    Largest palindrome product
    计蒜客 挑战难题 元素移除
    码农谷 球从M米高度自由下落第N次落地时反弹的高度
    挑战难题 奇怪的国家
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/10559338.html
  • Copyright © 2011-2022 走看看