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实现在小方框中浏览大图的代码
Aug 14 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
详解微信小程序支付流程与梳理
Jul 16 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 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计算数组不为空元素个数的方法
2014/01/27 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python轻松查到删除自己的微信好友
2016/01/10 Python
python障碍式期权定价公式
2019/07/19 Python
深入了解Python在HDA中的应用
2019/09/05 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
附答案的Java面试题
2012/11/19 面试题
综合办公室岗位职责
2015/04/11 职场文书
银行催款通知书
2015/04/17 职场文书
2015暑假实习报告范文
2015/07/13 职场文书