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


    喜欢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() 这个好像也是有点问题的,自行试试。

  • 相关阅读:
    evernote100个做笔记的好方法
    平衡二叉树的调整模版
    晨间日记的奇迹
    hdu 2952 Counting Sheep
    hdu 1535 Invitation Cards
    poj 3259 Wormholes(spfa)
    poj 2263 Heavy Cargo(floyd)
    poj 3268 Silver Cow Party(SPFA)
    hdu 1690 Bus System
    hdu 3631 Shortest Path(Floyd)
  • 原文地址:https://www.cnblogs.com/wyhlightstar/p/6862464.html
Copyright © 2020-2023  润新知