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="全选" οnclick="checkAll();"/><input type="button" value="反选" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="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="全选" οnclick="checkAll();"/><input type="button" value="反选" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="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="全选" οnclick="checkAll();"/><input type="button" value="反选" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="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="全选" οnclick="checkAll();"/><input type="button" value="反选" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="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=条件？真值：假值

转载于:https://www.cnblogs.com/momo8238/p/7463587.html

jQuery全选反选实例相关推荐

JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
JQuery全选/反选设置
/*** HTML代码*/ <div class="checkbox-filter"><label class="select">< ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...
Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
【基础】jquery全选、反选、全不选代码
1.JS代码 function ($) { //全选反选全不选 $("#selAll").click(function () { $(".lists :checkbo ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...

jQuery全选反选实例

jQuery全选反选实例相关推荐

最新文章

热门文章