全选,取消全选功能

 以前做项目需要全选/全选的功能,当时用的jquery做的,第一次可操作,但到第三次点击之后就失效了,找了很多资料,原来是jquery版本的问题。 

 在jquery1.9之前都能实现,但到1.9之后就不行了,我先在这里把代码贴出来 ,需要的朋友可以选择jquery 1.8 但需要搞版本的又需要实现这种功能的 , 下面我有原生js实现的代码 结构都一样

<input id="btn" type="checkbox" /><label>全选</label>
  <div class="list">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
  </div>
<script>
/*jquery*/
$("#btn").change(function(){
  if($(this).is(":checked")){
    $('.list').find('input').attr('checked',true); 
  }else{
    $('.list').find('input').attr('checked',false);
  }
});

/*原生 js 实现 */
$("#btn").change(function(){
  if($(this).is(":checked")){
    $('.list').find('input').each(function(){
      $(this).get(0).checked = true;
    });
  }else{
    $('.list').find('input').each(function(){
      $(this).get(0).checked = false;
    });
  }
});
</script>

 

posted @ 2014-11-19 11:14  幹掉上帝  阅读(143)  评论(0)    收藏  举报