jquery的attr()函式導致全選和不全選效果只有第一次有效

admin發表於2017-03-19
jQuery函式

全選和不全選效果這個大家應該都很熟悉，特別是在網站後臺管理或者個人中心這樣的功能頁面使用更加頻繁,所以對於此效果的掌握也是非常必要的，但是可能很多朋友在編寫此功能的時候遇到一些意想不到的問題，那就是程式碼好像是沒有任何問題，但是就是不能夠正確執行，最常見的就是第一次可以全選，但是以後的操作完全失效了，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />  
<title>核取方塊全選和取消程式碼-螞蟻部落</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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>

上面的程式碼驗證了此種錯誤現象，下面介紹一下出現此種問題的原因:

這種現象主要是attr()函式的返回值造成的，如果核取方塊選中，那麼它的返回值是true，但是如果不選中，那麼返回值是undefined，所以$(this).attr("checked",flag)可能會是: $(this).attr("checked",undefined)，所以就不能實現我們的要求。

解決方案:

只要將attr()函式修改為prop()函式即可，如果核取方塊選中，那麼返回值是true，如果沒有返回值是false。

相關文章