bootstrap 中的 iCheck 全选反选功能的实现

最新推荐文章于 2022-01-07 15:35:53 发布

转载最新推荐文章于 2022-01-07 15:35:53 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wyhlightstar/p/6862464.html

本文介绍如何使用iCheck插件实现全选和反选功能，包括监听输入框状态变化的方法，如ifChecked、ifUnchecked及ifChanged等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

喜欢bootstrap 风格的同学应该知道，iCheck的样式还是很好看的。

官网： http://www.bootcss.com/p/icheck/

进入正题，iCheck提供了一些方法，可以进行全选和反选的判定。

　　ifChecked：输入框的状态变为 checked

　　ifUnchecked：checked 状态被移除

　　ifChanged：输入框的 checked 或 disabled 状态改变了

    var checkAll =$('input.all');  //全选的input
    var checkboxs =$('input.check'); //所有单选的input

    checkAll.on('ifChecked ifUnchecked',function(event){
      if(event.type == 'ifChecked'){
        checkboxs.iCheck('check');
      }else{
        checkboxs.iCheck('uncheck');
      }
    });

    checkboxs.on('ifChanged',function(event){
      if(checkboxs.filter(':checked').length == checkboxs.length){
        checkAll.prop('checked',true);
      }else{
        checkAll.prop('checked',false);
      }
      checkAll.iCheck('update');
    })

PS：其实本人是很讨厌bootstrap的，奈何公司。。。；

　　之前不知道怎么写，看了各个网站，发现他们判断状态改变是这样写的

removeProp()这个方法我认为不太好，会出现无法移除的bug，说到这里就有点生气了，你说你分享你的知识的时候都不测试的吗？？？昂！

removeProp()用于移除由 prop() 添加的属性，不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。

可以用removeAttr()，或者 prop('checked',false)替代；

*removeAttr() 这个好像也是有点问题的，自行试试。

转载于:https://www.cnblogs.com/wyhlightstar/p/6862464.html