jquery实现checkbox全选/全不选

标签: checkbox jquery
485人阅读 评论(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. })

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

查看评论

卸载3721网络实名的方法

    把3721称呼为病毒实不为过,这个家伙不仅非常讨厌,而且几乎无法卸载!本人毕竟对软件开发比较熟悉,特别看不惯一些软件强硬潜入自己机器的问题,终于软磨硬泡把3721搞定了,以下是卸载方法:   ...
  • killererer
  • killererer
  • 2001-08-24 15:11:00
  • 2138

jquery实现checkbox的全选和全不选

  • 2016年10月18日 10:06
  • 2KB
  • 下载

checkbox全选、全不选、反选

第一次写博客,这边简单的记录下checkbox常见的勾选代码 //全选、全不选 function selectAll() { if ($("#selectAll").attr("checke...
  • qq_19707515
  • qq_19707515
  • 2015-11-04 11:18:57
  • 3733

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

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,...
  • u010853701
  • u010853701
  • 2016-01-27 21:01:51
  • 2253

checkbox全选全不选、子chekbox全选非全选对应父checkbox选不选——全

jQuery实现CheckBox全选、全不选 $(function() { $("#checkAll").click(function() { ...
  • superit401
  • superit401
  • 2016-07-08 16:40:47
  • 2943

利用jQuery实现全选全不选反选

$(function(){  //全选  $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);  ...
  • zsj523
  • zsj523
  • 2013-04-01 19:19:31
  • 680

jquery实现全选和全不选功能

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

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择...
  • lanqibaoer
  • lanqibaoer
  • 2014-07-02 19:55:05
  • 2379

如何利用jQuery使复选框一键全选/全不选

我们先写一个表单: 你爱好的运动是? 全选/不全选 1 2 3 4 在第一个复选框中添加click()事件, 核心的jQuery代码如下: $(document)...
  • hxy19971101
  • hxy19971101
  • 2016-08-07 17:09:56
  • 6634

关于jQuery实现CheckBox全选只能生效一次的问题

//这代码只有一次全选、全不选的效果 第三次点击checkall会没有任何效果 $("#checkall").click(function(){ $('input[name="check"]').a...
  • sourny
  • sourny
  • 2015-12-01 10:43:19
  • 1955
    个人资料
    持之以恒
    等级:
    访问量: 188万+
    积分: 2万+
    排名: 506
    文章分类
    最新评论