快捷導(dǎo)航

jquery操作checkbox火狐下第二次無(wú)法勾選的解決方法

更新時(shí)間：2016年10月10日 09:36:30 作者：oaTuiXgnauH

這篇文章主要介紹了jquery操作checkbox火狐下第二次無(wú)法勾選問(wèn)題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在學(xué)習(xí)jQuery（版本jquery-1.9.1.js），要求用jQuery實(shí)現(xiàn)全選/全不選、反選，在IE（IE8）中沒(méi)有問(wèn)題，但在火狐瀏覽器中調(diào)試的時(shí)候出現(xiàn)了一些小問(wèn)題，達(dá)不到效果。

html代碼如下：

<div>
    你愛(ài)好的運(yùn)動(dòng)是
    <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(){
    //全選/全不選復(fù)選框
    $("#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>

復(fù)選框綁定了click事件，點(diǎn)一次選中，再點(diǎn)擊取消選中，依次類(lèi)推。這個(gè)功能在IE8中沒(méi)問(wèn)題，但是在firefox中測(cè)試的時(shí)候，前兩次都沒(méi)有問(wèn)題，可以正常顯示選中和取消，但當(dāng)再去選中的時(shí)候，復(fù)選框的屬性checkbox值變?yōu)椤眂hecked”，沒(méi)問(wèn)題，但是復(fù)選框卻不在顯示選中狀態(tài)，明明屬性值改了，但是卻不顯示勾選，我以為是瀏覽器緩存的問(wèn)題，但是刪除緩存還是不行……..后來(lái)在網(wǎng)上看到了方法，說(shuō)是jQuery版本的問(wèn)題，jQuery1.6以上用attr會(huì)存在兼容性問(wèn)題，得換成prop。

查了下API prop屬性是這樣的：

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

概述

獲取在匹配的元素集中的第一個(gè)元素的屬性值。
隨著一些內(nèi)置屬性的DOM元素或window對(duì)象，如果試圖將刪除該屬性，瀏覽器可能會(huì)產(chǎn)生錯(cuò)誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯(cuò)誤。
jQuery API明確說(shuō)明，1.6+的jQuery要用prop，尤其是checkBox的checked的屬性的判斷，于是乎把js代碼里面的attr換成prop就行了。

代碼：

//1.6+的jQuery要用prop代替attr否則達(dá)不到效果！?。?！
  //全選/全不選復(fù)選框
  $("#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"));
   });
  });

希望對(duì)大家有所幫助。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: