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 ...
随机推荐
- 北京Uber优步司机奖励政策(1月30日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 北京Uber优步司机奖励政策（12月25日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- mavn打外部配置jar包依赖
https://blog.csdn.net/pei19890521/article/details/80984707
- Jquery获取DOM绑定事件
获取到当前正在执行的事件: $('#testDive').bind('click', function(event){alert('event: ' + event.type)}); 获取所有绑定事件 ...
- python 终极篇 --- django 视图系统
Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...
- SSH：远程登陆
SSH用于计算机之间的加密登录的前提是公钥为真,所以存在中间人攻击中间人攻击:与https协议不同,SSH协议的公钥是没有CA公证的,当对公钥的请求被中间截获时,中间人可以发出伪造公钥干坏事而不被识破 ...
- gdb超级基础教程
GDB超级基础教程 为什么叫超级基础呢,因为我被坑了一把.... 编译选项带 -g 就可以在可执行程序中加入调试信息,然后就可以使用gdb去查看了. 使用help命令就可以看到: (gdb) help ...
- 我的linux操作习惯
标签(空格分隔): ubuntu 最佳操作 用linux随时可能会有宕机的危险,谁知道我哪会神经病犯了呢.用deepin宕机的可能性会更高的,所以我才不得不安装一个windows做备份,然后把数据备份 ...
- 五：Edits Viewer离线日志查看器
离线日志查看器可以将二进制日志翻译成可读的文件(如XML),只有当hadoop集群停止时才能使用.输入文件支持的类型:XML和二进制.输出文件支持类型:XML 二进制 Stats(标准输出?) ...
- 最短路径——Dijkstra（简易版）
简易之处:顶点无序号,只能默认手动输入0,1,2...(没有灵活性) #include <iostream> #include <cstdio> #include <cs ...