yungeio.com

jquery操作checkbox火狐下第二次无法勾选的解决方法

最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选、反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果。

html代码如下:

<div>
    你爱好的运动是
    <input type="checkbox" id="selectal1" /><label for="selectal1">全选/全不选</label><br/>

    <input name="intrest" type="checkbox" />足球
    <input name="intrest" type="checkbox" />篮球
    <input name="intrest" type="checkbox" />羽毛球
    <input name="intrest" type="checkbox" />乒乓球<br/>
    <button id="allbtn">全选</button>
    <button id="notallbtn">全不选</button>
    <button id="reversebtn">反选</button>
    <button>提交</button>
  </div>

jQuery代码:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
  $().ready(function(){
    //全选/全不选复选框
    $("#selectal1").click( function(){
      if($(this).attr("checked")==true){
        $("input:checkbox[id!='selectal1']").each(function() {
          $(this).attr("checked",true);
        });
      }else{
        $("input:checkbox[id!='selectal1']").each(function() {
          $(this).attr("checked",false);
        });
      }
    });
    //全选按钮
    $("#allbtn").click(function(){
      $("input:checkbox[id!='selectal1']").each(function() {
        $(this).attr("checked",true);
      });
    });
    //全不选按钮
    $("#notallbtn").click(function(){
      $("input:checkbox[id!='selectal1']").each(function() {
        $(this).attr("checked",false);
      });
    });
    //反选按钮
    $("#reversebtn").click(function(){
      $("input:checkbox[id!='selectal1']").each(function() {
        $(this).attr("checked",!$(this).attr("checked"));
      });
    });
  })
</script>

复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在IE8中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为”checked”,没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,我以为是浏览器缓存的问题,但是删除缓存还是不行……..后来在网上看到了方法,说是jQuery版本的问题,jQuery1.6以上用attr会存在兼容性问题,得换成prop。

查了下API prop属性是这样的:

prop(name|properties|key,value|fn)

概述

获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,于是乎把js代码里面的attr换成prop就行了。

代码:

//1.6+的jQuery要用prop代替attr否则达不到效果!!!!
  //全选/全不选复选框
  $("#selectal1").click( function(){
   if($(this).prop("checked")==true){
    $("input:checkbox[id!='selectal1']").each(function() {
     $(this).prop("checked",true);
    });
   }else{
    $("input:checkbox[id!='selectal1']").each(function() {
     $(this).prop("checked",false);
    });
   }
  });
  //全选按钮
  $("#allbtn").click(function(){
   $("input:checkbox[id!='selectal1']").each(function() {
    $(this).prop("checked",true);
   });
  });
  //全不选按钮
  $("#notallbtn").click(function(){
   $("input:checkbox[id!='selectal1']").each(function() {
    $(this).prop("checked",false);
   });
  });
  //反选按钮
  $("#reversebtn").click(function(){
   $("input:checkbox[id!='selectal1']").each(function() {
    $(this).prop("checked",!$(this).prop("checked"));
   });
  });

希望对大家有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持简编(ijianbian.com)。

总评分
共 0 位简友打分
  • 5
  • 4
  • 3
  • 2
  • 1
简友评价
快来发表你的看法吧(〃'▽'〃)

同类型推荐