jquery实现全选、不选、反选的两种方法


Posted in Javascript onSeptember 06, 2016

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false"。经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

方法一:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>全选、不选、反选 1</title>
 <script src="jquery.min.js"></script>
 <script>
 $(function(){
 $('.check .btn1').click(function(){//全选
$('.music :checkbox').prop('checked',true);
 });

 $('.check .btn2').click(function(){//全不选
$('.music :checkbox').prop('checked',false);
 });

 $('.check .btn3').click(function(){//反选
$('.music :checkbox').each(function(){
 $(this).prop('checked',!$(this).prop('checked'));
 });
 });
 });
 </script>
</head>
<body>
 <div class="music">
 <input type="checkbox" name="music1" value="小白兔">小白兔<br>
 <input type="checkbox" name="music2" value="小燕子">小燕子<br>
 <input type="checkbox" name="music3" value="哈巴狗">哈巴狗<br>
 <input type="checkbox" name="music4" value="小青蛙">小青蛙<br>
 <input type="checkbox" name="music5" value="数鸭子">数鸭子<br><br>
 </div>
 <div class="check">
 <button class="btn1">全选</button>
 <button class="btn2">全不选</button>
 <button class="btn3">反选</button>
 </div>
</body>
</html>

方法二:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>全部由jquery动态生成</title>
 <script src="jquery.min.js"></script>
 <script>
 function checkAll(){//全选
$(":checkbox").prop("checked",true);
 }
 function checkNo(){//全不选
$(":checkbox").prop("checked",false);
 }
 function checkRev(){//反选
$(":checkbox").each(function(){
 $(this).prop("checked",!$(this).prop("checked"));
 });
 }
 
$(function(){
 var sec=$("<div></div>").appendTo($("body"));//创建一个div追加到body里面
var input="";//创建一个空的变量
for(var i=0;i<5;i++){
 var index=i+1;
 input+="<input type='checkbox' name='标题'"+index+"value='标题'"+index+">"+"标题"+index+"<br>";
 }//把从0到4每一个创建的input收集到空变量里面
sec.append(input);//再把这些收集到的所有input追加到div里面

sec.append($("<button onclick='checkAll()'>全选</button>"));//创建全选按钮,并追加到div里面
sec.append($("<button onclick='checkNo()'>全不选</button>"));//创建全不选按钮,并追加到div里面
sec.append($("<button onclick='checkRev()'>反选</button>"));//创建反选按钮,并追加到div里面
});
 </script>
</head>
<body>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
vue的mixins属性详解
Mar 14 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 #Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 #Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 #Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 #Javascript
Vue表单实例代码
Sep 05 #Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
You might like
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Django REST framwork的权限验证实例
2020/04/02 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python raise的基本使用
2020/09/10 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
个人安全生产责任书
2014/07/28 职场文书
机关工会工作总结2015
2015/05/26 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js