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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
php跨域调用json的例子
Nov 13 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
微信jssdk用法汇总
Jul 16 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
webpack 处理CSS资源的实现
Sep 27 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中文本操作的类
2007/03/17 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP学习笔记之一
2011/01/17 PHP
浅析php学习的路线图
2013/07/10 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
nodejs基础知识
2017/02/03 NodeJs
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python字典快速保存于读取的方法
2018/03/23 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
驾驶员岗位职责
2014/01/29 职场文书
食品安全演讲稿
2014/09/01 职场文书