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 表单之间的数据传递代码
Dec 04 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
详解vuex的简单使用
Mar 12 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
Vue如何清空对象
Mar 03 Vue.js
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往windows中添加用户
2006/12/06 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php post换行的方法
2020/02/03 PHP
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python条件和循环的使用方法
2013/11/01 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
浅谈Django REST Framework限速
2017/12/12 Python
python计算两个数的百分比方法
2018/06/29 Python
python 美化输出信息的实例
2018/10/15 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
环保倡议书500字
2014/05/15 职场文书
日语专业求职信
2014/07/04 职场文书
七一讲话心得体会
2014/09/05 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
ktv服务员岗位职责
2015/02/09 职场文书