在取复选框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实现全选、不选、反选的两种方法的更多相关文章

  1. jQuery中清空元素.empty()和.html('')，两种方法的对比

    jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...

  2. 利用JQuery实现全选和反选的几种方法

    前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...

  3. 选中没有选中的复选框，匹配含有某个字符串的正则，json取值的两种方法，把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  4. 两种方法使vue实现jQuery调用

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按 ...

  5. 如何使用T-SQL备份还原数据库及c#如何调用执行？ C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一） span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

  6. Android中实现全屏、无标题栏的两种办法

    在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...

  7. jQuery属性选择器.attr()和.prop()两种方法

    在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...

  8. Android中实现全屏、无标题栏的两种办法（另附Android系统自带样式的解释）

    在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...

  9. 网页内容的html标签补全和过滤的两种方法

    网页内容的html标签补全和过滤的两种方法: 假设你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包括进去了,我们能够写个函数方法来补全ht ...

随机推荐

  1. 我的Android进阶之旅------>解决：Failed to create 'build\outputs\apk\watch-debug-unaligned.apks': 拒绝访问。

    1. 错误描述 今天用Android Studio进行项目编译的时候,报错如下所示: FAILURE: Build failed with an exception. * What went wron ...

  2. Andrew Ng机器学习编程作业:Logistic Regression

    编程作业文件: machine-learning-ex2 1. Logistic Regression (逻辑回归) 有之前学生的数据,建立逻辑回归模型预测,根据两次考试结果预测一个学生是否有资格被大 ...

  3. spring整合问题分析之-Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    1.异常分析 Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into ...

  4. 利用基准电压效正Vcc做参考电压的ADC采样计算方法

    利用基准电压效正Vcc做参考电压的ADC采样计算方法

  5. 深入解析Koa之核心原理

    这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数.扩展res和req.中间件实现原理.异常处理的等这几个方面来介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参 ...

  6. Django QuerySet API

    https://docs.djangoproject.com/en/2.1/ref/models/querysets/

  7. maven中使用dom4j解析、生成XML的简易方法

    此片文章主要写一些关于如何在maven工程中使用dom4j来解析或生成XML的建议方法,实际可使用的写法不仅限于如下所写的样例代码.此处进攻快速入手和提供思路使用. 首先配置pom.xml中的依赖的包 ...

  8. java判断集合list是为空

    if(null == list || list.size() ==0 ){ } list.isEmpty()和list.size()==0 没有区别 isEmpty()判断有没有元素而size()返回 ...

  9. 解决Vim插入模式下backspace按键无法删除字符的问题【转】

    本文转载自:https://blog.csdn.net/zxy987872674/article/details/64124959 最近使用某个服务器编辑文件时,快捷键i进入插入模式后,下方不出现in ...

  10. 解决org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z

    这个问题来的有点莫名奇妙,之前我的hadoop运行一直是正常的,某一天开始运行Mapreduce就报这个错. 试过很多种方法都没有用,比如 1.path环境变量2.Hadoop bin目录下hadoo ...