jQuery第二次無法全選checkbox核取方塊

antzone發表於2017-04-12
jQuery

可能不少朋友都遇到過這樣的問題，那就是在全選和取消全選的功能中。

第一次是好用的，但是第二次就失效了，下面就介紹一下為什麼會出現此問題。

當然引起此問題的原因可能很多，這裡介紹的是比較常見的一種。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />  
<title>核取方塊全選和取消程式碼-螞蟻部落</title>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(function(){  
  $("#CheckAll").click(function(){  
    var flag=$(this).attr("checked");  
    if(flag){ 
      $("#flag").text("取消"); 
    } 
    else{ 
       $("#flag").text("全選"); 
     } 
    $("[name=subBox]:checkbox").each(function(){  
      $(this).attr("checked",flag);  
    })  
  })  
})  
</script>  
</head>  
<body>  
<div>  
<input id="CheckAll" type="checkbox" /><span id="flag">全選</span>  
<input name="subBox" type="checkbox" />螞蟻部落一 
<input name="subBox" type="checkbox" />螞蟻部落二  
<input name="subBox" type="checkbox" />螞蟻部落三  
<input name="subBox" type="checkbox" />螞蟻部落四  
</div>  
</body>  
</html>

上面的程式碼在1.83版本會出現第一次可以，第二次就失效的問題。

現在1.90版本直接第一次也失效了，解決此問題非常簡單，只要將attr()方法更換為prop()即可。

相關文章