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 ...
随机推荐
- jquery实现倒计时功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- textview的阴影线
android:shadowColor="#000000" android:shadowDx="1" android:shadowDy="1" ...
- uvaoj1339 - Ancient Cipher(思维题，排序，字符串加密)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 适配chrome65最新selenium-chromedriver
网盘地址:https://pan.baidu.com/s/1BmdwRgD96IL32-3FTFxPSg 密码: 2vg6
- myeclipse tomcat部署按钮点击没反应
进入workspace目录,删除.metadata\.plugins\org.eclipse.core.runtime\.settings\com.genuitec.eclipse.ast.deplo ...
- spark写入ES(动态模板）
使用es-hadoop插件,主要使用elasticsearch-spark-20_2.11-6.2.x.jar 官网:https://www.elastic.co/guide/en/elasticse ...
- 深入理解 Vuejs 组件
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 组件的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 深入理解 Vue ...
- 简单说明hadoop集群运行三种模式和配置文件
Hadoop的运行模式分为3种:本地运行模式,伪分布运行模式,集群运行模式,相应概念如下: 1.独立模式即本地运行模式(standalone或local mode)无需运行任何守护进程(daemon) ...
- LeetCode 700——二叉搜索树中的搜索
1. 题目 2. 解答 如果根节点为空,直接返回 NULL.如果根节点非空,从根节点开始循环查找,直到节点为空. 如果待查找的值大于当前节点值,节点指向右孩子: 如果待查找的值小于当前节点值,节点指向 ...
- 将SqlDataReader 数据集转化为datatbale ,在将datatable 转化为iList
public IList GetModelList(string tablename, string where) { IList list = null; DataTable dataTable = ...