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 ...
随机推荐
- Spring-Spring概述
Spring概述 Spring是最受欢迎的企业级Java应用程序开发框架.数以百万的来自世界各地的开发人员使用Spring框架来创建好性能.易于测试.可重用的代码. Spring框架是一个开源的Jav ...
- spring 整合mybatis找不到${jdbc.driverClass}
1.检查是否设置了mapper扫描org.mybatis.spring.mapper.MapperScannerConfigurer类 在spring里使用org.mybatis.spring.map ...
- js判断background颜色明暗色调,以设置白/黑字体颜色
整理自:jscolor.js插件 this.styleElement.style.color = this.isLight() ? '#000' : '#FFF'; this.isLight ...
- leetcode每日一题——反转整数
题目: 反转整数 难度: 简单 描述: 给定一个 32 位有符号整数,将整数中的数字进行反转. 解法: class Solution { public int reverse(int x) { //i ...
- Java内置锁synchronized的可重入性
学习自 https://blog.csdn.net/aigoogle/article/details/29893667 对我很有帮助 感谢作者
- java @Retention元注解
@Retention元注解 有三种取值:RetentionPolicy.SOURCE.RetentionPolicy.CLASS.RetentionPolicy.RUNTIME分别对应:Java源文件 ...
- MyEclipse激活失败
最近从MyEclipse2014升级MyEclipse2015,结果按照MyEclipse2014的方式激活2015总是失败,显示错误如下图所示: 反复实验,怎么也不能成功激活,最终找到方法 很多情况 ...
- ReadyBoost
ReadyBoost是Windows Vista中的新技术,在继Windows Vista的下一代操作系统Windows 7中,同样包含了这项技术,它利用了闪存随机读写及零碎文档读写上的优势来提高计算 ...
- const,var,let笔记
js中定义变量的方式有三种const.var.let const 作用域:全局作用域或函数作用域 定义的变量不可修改,且必须初始化 eg: const a= 1; a= 2; console.log( ...
- QString类
1.将QString所有字母大写 QString.toUpper() 2.将QString所有字母小写 QString.toLower() 3.获取字符串的字符数 QString.length() 4 ...