jquery实现全选、不选、反选的两种方法
在取复选框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(){ //反选
$.each($(":checkbox"),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>
jquery实现全选、不选、反选的两种方法的更多相关文章
- jQuery中清空元素.empty()和.html('')，两种方法的对比
jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...
- 利用JQuery实现全选和反选的几种方法
前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...
- 选中没有选中的复选框，匹配含有某个字符串的正则，json取值的两种方法，把变量定义在外面跟里面的区别
一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...
- 两种方法使vue实现jQuery调用
引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- Android中实现全屏、无标题栏的两种办法
在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...
- jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...
- Android中实现全屏、无标题栏的两种办法（另附Android系统自带样式的解释）
在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...
- 网页内容的html标签补全和过滤的两种方法
网页内容的html标签补全和过滤的两种方法: 假设你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包括进去了,我们能够写个函数方法来补全ht ...
随机推荐
- django中的setting全局变量的导入
需求:在py文件中导入settings.py中的变量BASE_DIR settings.py文件 import os # Build paths inside the project like thi ...
- node.js---sails项目开发（3）
1.为新建的sails数据库新建一个用户,首先连接数据库 mongo localhost:27017 (1)显示所有数据库 (2)切换数据库 show dbs use sails 新建一个用户 账 ...
- 维多利亚的秘密 golang入坑系列
原文在gitbook,字字原创,版权没有,转载随意. 在写本文的前一天,2017维密在上海开始了. 为了纪念屌丝界的盛世,特为本节起名维多利亚的秘密.现在的社会,要想出名只有抓眼球.所以写份技术文章, ...
- Ubuntu学习笔记1-基本部分
Vim相当于vi的升级版 Find p*.txt支持查找通配符 Echo 回显命令 echo hello >1.txt 追加命令,不覆盖 echo hello >1.txt 覆盖命 ...
- Changing an Elements innerHTML in TWebBrowser
I'm unable to change the innerHTML of a javascript element, but i can change the id so i'm not sure ...
- Spring中的定时调度(Scheduling)和线程池(Thread Pooling)
使用triggers和SchedulerFactoryBean来包装任务 我们已经创建了job details,jobs.我们同时回顾了允许你调用特定对象上某一个方法的便捷的bean. 当然我们仍需要 ...
- Linux网络相关命令firewalld和netfilter、iptables 使用（6/22）
iptables和netfilter的关系: netfilter在内核空间的代码根据table中的rules,完成对packet的分析和处置.但是这些table中的具体的防火墙rules,还是必须由系 ...
- Appium+eclipse+python环境配置
1.安装安卓开发环境(教程很多,不细写) 2.安装eclipse 下载eclipse,解压即可 3.安装python 下载地址:https://www.python.org/downloads/r ...
- MySQL java连接被拒绝：java.sql.SQLException: Access denied for user 'root'@'****' (using password: YES)
//系统运行出现错误:java.sql.SQLException: Access denied for user 'root'@'***.**.**.**' (using password: YES) ...
- adb 不设别解决方案
1.当然首先你得将手机里的usb debug选项选上,否则lsusb是不会有你的设备的 2. lsusb 查看usb设备id 3. sudo vim /etc/udev/rules.d/51-andr ...