jQuery 全选/取消全选(反选)/单选操作用法 - 文章教程

jQuery 全选/取消全选(反选)/单选操作用法

发布于 2017-12-07 字数 3031 浏览 1702 评论 0

用原生态的 JavaScript 操作页面上的一组 CheckBox 全选/取消全选,逻辑很简单,实现代码也不难写。但使用 jQuery 实现则非常简单,代码很简洁,文中还介绍了 prop() 函数的用法和注意事项,希望对你有所帮助。

jQuery 全选/取消全选(反选)/单选操作用法

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

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

引入jquery库

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script>

对于 CheckBox 的选择,实际上就是添加了一个属性 checked,不管后面有没有值,都是选中状态,在程序里面,如果 checked 值存在,就是 true,不存在就是 false。

一般的解决方法

于是就可以用下面的这个代码:

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

可是这段运行却是错误的,因为 $("#chk_all").attr("checked") 的值是 undefined,在我们编写的源代码里面并没有这个属性,就会报 undefined 错误。

prop函数

查看jQuery的api手册,发现了一个prop函数,.prop() 获取匹配的元素的属性值,这个方法是jquery1.6以后出来的,用来区别之前的 .attr() 方法。 最大的区别就是:布尔型的属性,1.6以后都是用 .prop() 方法就对了,这个布尔型的属性,再解释一下,是属性值只有 true / false 的属性。 还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用 .prop() 方法。比如:checkeddisable 这样的,其实它们说到底还是属于布尔型的属性。

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

正确的代码

上面的代码可以这样写:

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论