jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行
全选-取消操作，注意$('#tb :checkbox').prop('checked',true); tb后面一定得有括号，否则会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody> </table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
} </script> </body>
</html>
用DOM实现 全选-反选-取消操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody> </table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
//this 代指当前循环的每一个元素,this是DOM对象。
//console.log(this);
//用DOM实现的
if(this.checked){
this.checked=false;
}else{
this.checked=true;
}
})
} </script> </body>
</html>
效果：
2.用 jQuery实现 全选-反选-取消操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody> </table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
//传2个参数表示设置值，传1个参数表示获取值。
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
} </script> </body>
</html>
3. 三元运算
var v=条件？真值：假值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody> </table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancelAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
var v=$(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
} </script> </body>
</html>
4. 笔记
实例：
全选，反选，取消
-选择器
-$('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked',true); 赋值
-jQuery方法内置循环： $('#tb :checkbox').xxxx
$('#tb :checkbox').each(function(k){
//k是当前索引
//this，DOM，当前循环的元素$(this)
})
-三元运算：var v=条件？真值：假值
jQuery全选反选实例的更多相关文章
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...
- jquery 全选反选 .prop('checked',!$(this).is(':checked'));
//废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...
随机推荐
- DSP5509的GPIO学习-第5篇
1. 使用CCS V6.1版本,目前已经不局限于仅仅把实验搞清楚了,要深入去探究内部的原理,本章看下GPIO实验 2. 在CCS启动的时候,提示,这个问题是什么,XDAIS是什么?XDAIS (eXp ...
- 如何设置虚拟化的centos内、外网络通畅
首先要去确定你的本机(本地物理机)是通过以太网(插网线)上网的,还是通过wifi上网的.这个很重要. 如果是通过以太网去上网,那么虚拟化出来的系统,网络配置应当选择桥接模式. 当然了,也不一定非要用桥 ...
- VS Help Viewer 显示内容为HTML源码的问题
万恶的IE10 为了学习,安装了一套Windows Server 2012+SQL 2012+VS 2012的环境,整体感觉还不错,只是在使用Help Viewer查看帮助的时候,发现显示内容居然为H ...
- 编译chromium时下载gn.exe时出错的解决方案
天朝人写个代码真难,想要编译一下chromium,但是获取代码时各种坑,不是网速慢,就是网络联不通,真难玩. 本文针对下载gn.exe等工具时失败的解决方案. 原因1:gclient没有走代理,针对使 ...
- 使用unittest里面的discover()方法组织测试用例
import osimport unittest directory = os.getcwd()# 测试用例的目录organize = unittest.defaultTestLoader.disco ...
- mysql新手进阶02
云想衣裳花想容,春风拂槛露华浓. 若非群玉山头见,会向瑶台月下逢. 现在有一教学管理系统,具体的关系模式如下: Student (no, name, sex, birthday, class) Tea ...
- js中的数组对象排序
一.普通数组排序 js中用方法sort()为数组排序.sort()方法有一个可选参数,是用来确定元素顺序的函数.如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序.如: var ar ...
- 自测之Lesson6：文件I/O
题目:区分文件I/O和标准I/O. 区别: ①首先两者一个显著的不同点在于,标准I/O默认采用了缓冲机制,比如调用fopen函数,不仅打开一个文件,而且建立了一个缓冲区(读写模式下将建立两个缓冲区), ...
- c# dllimport
DllImport会按照顺序自动去寻找的地方:1.exe所在目录 2.System32目录 3.环境变量目录.所以只需要你把引用的DLL 拷贝到这三个目录下 就可以不用写路径了 或者可以这样serve ...
- sql 至少含有
查询Score表中至少有5名学生选修的并以3开头的课程的平均分数: select avg(degree),cnofrom scorewhere cno like '3%'group by cnohav ...