jQuery 复选框全选/取消全选/反选
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;
});
} // www.jbxue.com
});
// 全选
$("#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>用户名</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>
jQuery 复选框全选/取消全选/反选的更多相关文章
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- JQuery的复选框选中、取消、全选，全不选问题
一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...
- jQuery实现checkbox（复选框）选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- 复选框（checkox）全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- jquery 循环获取checkBox的值,以及对复选框选中，取消，操作按钮
法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- JavaScript实现单击全选 ,再次点击取消全选
以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- jquery 实现 单选框点击取消
<label for="1" class="z-label"> <input type="radio" class=&qu ...
随机推荐
- 多个桌面Deskspace如何使用
1 给Deskspace设置背景.在DeskSpace选项中设置显示背景为天空箱体图像(软件自带的图像效果,也可以使用静态图像,即自己的图片) 2 给六个桌面各设置一个背景(也可以使用同一个背景)右击 ...
- uni-app 如何开启sass\less处理
开启方式:工具->插件安装->安装完成,启用即可
- 心电图html js控件
https://github.com/joakimkemeny/jke.d3.ecg/tree/master/demo/js
- 笔试题之xml
XML部分 1.xml有哪些解析技术?区别是什么? 答:有DOM,SAX,STAX等 DOM:处理大型文件时其性能下降的非常厉害.这个问题是由DOM的树结构所造成的,这种结构占用的内存较多,而且DOM ...
- 媒体类型(MIME类型)
# encoding=utf-8 #python 2.7.10 #xiaodeng #HTTP权威指南 #HTTP协议:超文本传输协议是在万维网上进行通信时所使用的协议方案. #媒体类型: #HTTP ...
- LoadRunner 检查点函数总结
今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...
- 【LeetCode】【Python题解】Reverse Integer
Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 click to ...
- idea搭建简易ssm项目
按照http://www.cnblogs.com/hackyo/p/6646051.html来搭建ssm框架,一步成功,特此记录一下. 本机环境: idea2017.3 jdk1.8 mysql5.5 ...
- bootstrap Validators
地址:http://reactiveraven.github.io/jqBootstrapValidation/
- WordPress网站搬家经验总结
http://cnzhx.net/blog/move-wordpress-site-step-by-step/也许很多人都有跟我类似的经历:因为某种原因需要将自己的WordPress站点从一个空间转移 ...