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 ...
随机推荐
- 我的Android进阶之旅------>Android关于HttpsURLConnection一个忽略Https证书是否正确的Https请求工具类
下面是一个Android HttpsURLConnection忽略Https证书是否正确的Https请求工具类,不需要验证服务器端证书是否正确,也不需要验证服务器证书中的域名是否有效. (PS:建议下 ...
- CodeForces 215B Olympic Medal（数学啊）
题目链接:http://codeforces.com/problemset/problem/215/B Description The World Programming Olympics Medal ...
- Win10 jdk的安装以及环境变量的配置，及需要注意的坑
此篇文章献给自己,希望下次长点记性 最近本人终于有时间开始学习appium,并且开始在电脑上配置环境,第一步就是在我那刚装的Win10 系统上安装jdk,过程并不顺利,由于之前都是用的win7,几乎都 ...
- python web框架 Django的APP以及目录介绍 django 1.11版本
如果有很多业务请求函数 应该放在app目录 很多业务放在主站上 当用户一点跳到分站 例如 一个项目叫运维平台 他的业务 有资产管理 私有云 监控 不同业务线 chouti项目 - chouti - ...
- 005-环境安装【docker、fabric】
1.参考地址:https://hyperledger-fabric.readthedocs.io/en/latest/prereqs.html#install-curl 一.前置条件和系统配置 1.安 ...
- phpcms 列表页中，如何调用其下的所有子栏目？
{pc:content action="category" catid="$catid" num="99" order="list ...
- Windows换行符问题
MAC 和 Windows的换行符不一样,导致有些情况下,MAC编辑的多行文本,在windows的TXT中只是一行. 使用nodepad++可以正确识别出换行符,而且可以将其转为Windows格式,使 ...
- mybatis 插入之后返回id
usermapper.xml <insert id="insert" parameterType="app.models.User" keyPropert ...
- 笔记-CSS空背景图片会导致页面被加载两次
如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (Chrome.56.0.2924.87 测试) 因为:空图片路径属性值,默认加载当前页面的URL作为图片路径 Safar ...
- python进阶——进程/线程/协程
1 python线程 python中Threading模块用于提供线程相关的操作,线程是应用程序中执行的最小单元. #!/usr/bin/env python # -*- coding:utf-8 - ...