关闭

jquery实现checkbox全选/全不选

标签: checkboxjquery
427人阅读 评论(0) 收藏 举报
分类:

用原生态的JavaScript操作页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也不难写。但使用jQuery实现则非常简单,代码很简洁-write less,do more!

jquery版本:1.9

先看看HTML代码,很简单的操作框

  1. <div class="checkbox_test">
  2.   <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
  3.   <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
  4.   <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
  5.   <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
  6.   <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
  7. </div>

引入jquery库

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

对于checkbox的选择,实际上就是添加了一个属性:checked,不管后面有没有值,都是选中状态,在程序里面,如果checked值纯在,就是true,不存在就是false。于是就可以用下面的这个代码:

  1. //全选/反选
  2. $("#chk_all").on('click', function(){
  3. if($(".chk_all").attr("checked")){    //判断chk_all是否被选中
  4. $("input[name='chk_list']").attr("checked",false); //反选
  5. }else{
  6. $("input[name='chk_list']").attr("checked",true);//全选
  7. }
  8. })

可是,这段运行却是错误的,因为$(“.chk_all”).attr(“checked”)的值是undefined,因为在源代码里面没有这个属性。

查看jquery的api手册,发现了一个prop函数:

—————————-以下函数说明应用自jquery官方api———————————-

prop(name|properties|key,value|fn)

 

概述

获取在匹配的元素集中的第一个元素的属性值。

随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

参数

name

属性名称

properties

作为属性的“名/值对”对象

key,value

属性名称,属性值

key,function(index, attr)

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。

——————————————以上函数说明应用自jquery官方api————————————–

prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.

区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

那么

上面的代码可以这样写:

  1. //全选/反选
  2. $("#chk_all").on('click', function(){
  3. if($(".chk_all").prop("checked")){    //判断chk_all是否被选中
  4. $("input[name='chk_list']").prop("checked",false); //反选
  5. }else{
  6. $("input[name='chk_list']").prop("checked",true);//全选
  7. }
  8. })

这样修改以后,就不会报错,并且可以运行的很好!

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jquery实现全选和全不选功能

无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {     &#...
  • haibo0668
  • haibo0668
  • 2016-09-13 15:45
  • 1898

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,为什么要找一个纯CSS实现的CheckBox? 在这里给大家解释一下,如果说你找的Che...
  • u010853701
  • u010853701
  • 2016-01-27 21:01
  • 2128

解决jquery操作checkbox全选全不选无法勾选问题

解决jquery操作checkbox全选全不选无法勾选问题 标签: jquerycheckbox 2015-08-05 14:41 262人阅读 评论(0) 收藏 举报  分类: .NET(34) ...
  • a9254778
  • a9254778
  • 2015-11-26 08:29
  • 1119

jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值,还有获得选中的文本,以下给出demo,使用jquery方法操作checkbox demo: jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本) ...
  • u014079773
  • u014079773
  • 2016-08-30 17:33
  • 2861

一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果!现在我就来使用jQuery完成对复选框的全选和全不选效果,显示效果为: 要完成这个效果,必然要...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017-05-10 20:55
  • 637

jQuery实现表单全选、全不选以及反选的功能

本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单:<!-- HTML结构 --> <form id="test-form" action="test"> <legend>请选择...
  • github_38383183
  • github_38383183
  • 2017-06-22 20:07
  • 714

easyui中checkbox全选全不选的时不处理最后一行的实现

有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案 1.首先记录下统计功能的实现 onLoadSuccess:  function(data){ //dataTab...
  • m0_37609579
  • m0_37609579
  • 2017-04-01 09:57
  • 821

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 // 处理全选 document.getElementById('c...
  • sinat_21206105
  • sinat_21206105
  • 2016-09-01 21:13
  • 8221

jQuery实现全选、全不选和反选,没有只能选一次的bug

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦: 第一个比较不常用 的用button来做得全选全不选和反选按钮: 效果图如下: 具体代码如下:         ...
  • tsh18523266651
  • tsh18523266651
  • 2015-12-26 17:19
  • 585

JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应该为选中状态,        1.1、当再次...
  • oXinLiang12
  • oXinLiang12
  • 2016-12-12 16:01
  • 3196
    个人资料
    • 访问:1515586次
    • 积分:17303
    • 等级:
    • 排名:第664名
    • 原创:155篇
    • 转载:913篇
    • 译文:34篇
    • 评论:213条
    文章分类
    最新评论