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() 這個好像也是有點問題的，自行試試。