专注WEB开发 分享经验,沉淀知识

checkbox的全选与取消操作

 作者:chenxing  时间:2017-01-20 23:15  评论:

checkbox的全选功能是非常常见,特别是在一下列表的批量操作上,或者有众多的checkbox的时候。

checkbox的全选功能是非常常见,特别是在一下列表的批量操作上,或者有众多的checkbox的时候。

这里分析一下本人自己写的这部分功能。

贴代码,如下:

/**
 *checkbox全选与取消
 *
 *场景描述:有一个ktv列表,可以全选进行删除。
 *一个全选checkbox id为selectAll,列表checkbox,name为ktv_id
 */

 //解决点击全选checkbox的列表checkbox状态(全部选中或者全部不选)
$('#selectAll').click(function(){
oif($(this).is(':checked')){
o$('input[name="ktv_id[]"]').prop('checked',true);//必须用prop,不能用attr 第二次则无法显示备选状态
o}else{
o$('input[name="ktv_id"]').removeAttr('checked');
o}
})
//解决点击列表中的checkbox,全选checkbox的状态(当列表中checkbox全部选中时,全选的checkbox为选中状态,否则为不选状态)
//通对比总checkbox数量和被选选中的checkbox数量是否相等
$('input[name="ktv_id[]"]').click(function(){
o$ktvNum= $('input[name="ktv_id[]"]').length;
o$ktvSelectNum = $('input[name="ktv_id[]"]').filter(':checked').length;
oif($ktvNum == $ktvSelectNum){
o$('#selectAll').prop('checked',true);
o}else{
o$('#selectAll').removeAttr('checked',true);
o}
o
})

代码逻辑很简单,但有3个细节需要注意:

1.对checkbox属性checked的设置。这里采用的是prop而非attr,实践证明当你用attr设置的时候第一次是进行全选的时候貌似是一切正常,当你再次进行全选的时候,发现列表中的checkbox没有被勾选,不过当你debug查看元素的checkbox确实true。完美的解决方式就是用prop替代attr。

2.采用filter获取比勾选checkbox的元素集合。这里无法直接通过check属性进行选取。以为通过debug查看,你勾选下的元素是不会显示改变的checked值。

3.checked中的name一般用类似数组的形式处理(形如:name="ktv_id[]"),这样用js获取的时候或者传递到后端的时候这部分的数据是以数组的形式保存。可以取不一样的名称。当但元素很多的时候建用数组形式。

好吧,在表单元素中jq操作checkbox还是挺有意思的,总之,多实践。

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/26.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

个人博客图片免费存放解决方案

 2022-03-21 00:16  92

MySQL中的MVCC总结

 2022-03-19 03:00  94

什么才是高级工程师的第一技能

 2022-03-16 22:04  71

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里