码迷,mamicode.com
首页 > Web开发 > 详细

jQuery --checkbox全选和取消全选简洁高效的解决办法

时间:2014-06-29 06:15:01      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   问题   html   cti   

  最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下。有问题的话,还望各路大神指导一二。

html代码如下:

<fieldset data-role="controlgroup">  
  <label><input type="checkbox" name="boxes" id="select_all" onclick="selectAll();" >全选</label>   <label><input type="checkbox" name="box" onclick="select();" >子选项1</label>   <label><input type="checkbox" name="box" onclick="select();" >子选项2</label>
</fieldset> 

jquery代码如下:

function selectAll(){
     if ($("#select_all").prop("checked")) {  
         $("input[name=‘box‘]").prop("checked", true).checkboxradio("refresh");  
     } else {  
         $("input[name=‘box‘]").prop("checked", false).checkboxradio("refresh"); 
     }  
}
/*如果子项全被选中或者某一个子项被取消,全选项相应的勾选或者全选相应取消勾选*/
function select(){
      if ($("#select_all").prop("checked")){
          $("input[name=‘box‘]").each(function(){
                   if(this.checked == false)
                   {
                           $("input[name=‘boxes‘]").prop("checked", false).checkboxradio("refresh");
                   }
           });
      }
      else{
          var n = 0;
          $("input[name=‘box‘]").each(function(){
                   if(this.checked == false){
                       n++;
                   }
           });    
           if(!n){
               $("input[name=‘boxes‘]").prop("checked", true).checkboxradio("refresh");
           }
      }
 
}

 

jQuery --checkbox全选和取消全选简洁高效的解决办法,布布扣,bubuko.com

jQuery --checkbox全选和取消全选简洁高效的解决办法

标签:style   blog   color   问题   html   cti   

原文地址:http://www.cnblogs.com/qifan/p/3793963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!