码迷,mamicode.com
首页 > 其他好文 > 详细

关于checkbox全选与全不选遇到的问题

时间:2016-10-25 11:46:01      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:alert   匹配   move   type   hang   .net   his   16px   方法   

HTML:

  <div class="outbox">

    <label for="box">全选</label>

    <input type="checkbox" id="box"/>

  </div>

  <div class="outbox2">

    <label for="box1">选项1</label>

    <input type="checkbox" id="box1" name="goods"/>

    <label for="box2">选项2</label>

    <input type="checkbox" id="box2" name="goods"/>

  </div>

第一种方法:

  $("#box).click(function(){

    if($(this).is(":checked)){

      $("input[name=‘goods‘]").attr("checked","checked");

    }else{

      $("input[name=‘goods‘]").removeAttr("checked","checked");

    }

  })

  本以为这种方法能完成全选与全不选的功能,但是当第一次点击时,能正确全选,再点击也能正确全不选;但是当再次点击的时候,就不能全选与全不选了,点了完全没作用。找不到原因是什么!

第二种方法:

  $("#box).click(function(){

    if(this.checked){

      $("input[name=‘goods‘]").each(function(){

        this.checked=true;

      })

    }else{

      $("input[name=‘goods‘]").each(function(){

        this.checked=false;

      })

    }

  })

  这种方法就能正确的实现全选与全不选的功能了。这又是为什么呢?

第三种方法:

 1)$("#box).change(function(){

    $("input[name=‘goods‘]").prop("checked",this.checked);

  })

 2)$("#box).click(function(){

    if($(this).is(":checked")){

      $("input[name=‘goods‘]").prop("checked",true);

    }else{

      $("input[name=‘goods‘]").prop("checked",false);

    }

  })

  

  或者是把prop里的布尔值,true改成“checked”,false改成 “ ”。也可已实现全选与全不选的功能。

 

疑问:为什么prop就可以直接赋值,而attr这样赋值就不行呢?

  我一开始的时候,checkbox是未选中状态,alert($("#box").attr("checked"))一直返回的是defined,但是alert($("#box").prop("checked"))返回的就是false;这是为什么捏?

  有位网友也遇到过类似的问题,链接:http://www.jb51.net/article/51136.htm

  原因是在jquery1.6版本,对checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。也就是说如果checkbox在页面加载完毕是选中的,那么返回的永远都是选中状态,但是如果一开始就没有被选中,返回的永远是undefined。

 

  prop()函数用于设置或返回当前jq对象所匹配的元素的属性值,该函数属于jq对象。如果要删除DOM元素的属性,就用removeProp()函数

  prop()与attr()的区别:链接:http://www.365mini.com/page/jquery-attr-vs-prop.htm

关于checkbox全选与全不选遇到的问题

标签:alert   匹配   move   type   hang   .net   his   16px   方法   

原文地址:http://www.cnblogs.com/zjjDaily/p/5996072.html

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