在取复选框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. python函数回顾：slice()

    描述 slice() 函数实现切片对象,主要用在切片操作函数里的参数传递. 语法 class slice(stop) class slice(start, stop[, step]) 参数说明: st ...

  2. win64系统丢失d3dx9d_40.dll问题

    在Win64系统中,安装了DXSDK.DX9,却一直显示如上对话框,导致程序运行不起来. 于是我在网上找到了一个d3dx9d_40.dll,覆盖到C:\Windows\System32中,但是问题依然 ...

  3. 在Web上运行Linux—js/linux模拟器

    一个叫Fabrice Bellard 的程序员写了一段Javascript在Web浏览器中启动Linux(原网页,我把这个网页iframe在了下面),目前,你只能使用Firefox 4和Chrome ...

  4. 在SQLPLUS里显示IP、用户名和实例名

    在SQLPLUS里显示IP.用户名和实例名 方法一: 编辑$ORACLE_HOME/sqlplus/admin/glogin.sql文件在末尾加入下面的内容即可 define  gname = 'SQ ...

  5. Php 删除数组后几个元素

    <?php /* * 文件分类: practice@helkbore * 删除数组后几个元素 年2月5日10:24:42 */ $arr1 = array('aa', 'b', 'c', 'dd ...

  6. PHP如何实现验证码

    现在来说说简单的纯数字验证码吧. 如果是初学者,建议按照我代码的注释 //数字 一步步来.最简单的方法,还是把整个代码复制走了. 新建一个captcha.php: <?php //11>设 ...

  7. windows10+mysql8.0.zip安装

    〇.准备: MySQL8.0 Windows zip包下载地址:https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 环 ...

  8. Kattis - wheretolive 【数学--求质心】

    Kattis - wheretolive [数学] Description Moving to a new town can be difficult. Finding a good place to ...

  9. ado.net(增删改)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. iOS应用内付费(IAP)开发步骤

    1.苹果iTunes Connect内购产品信息录入. 1)创建app内购买项目(Create New),选择类型: 1.消耗型项目 对于消耗型 App 内购买项目,用户每次下载时都必须进行购买.一次 ...