jQuery核取方塊全選和全不選效果

admin發表於2017-10-24
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).prop("checked"); 
    if(flag){
      $("#flag").text("取消");
    }
    else{
       $("#flag").text("全選");
     }
    $("[name=subBox]:checkbox").each(function(){ 
      $(this).prop("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）.點選第一個核取方塊實現全選和全不選:

當點選那個核取方塊的時候，能夠獲取此核取方塊的checked屬性值，並且將其他的核取方塊的checked屬性值設定為第一個核取方塊的checked屬性值，這樣就實現了全選和全不選效果。

（2）.提示文字的切換:

當第一個核取方塊的checked屬性值為true的時候也就是全選中的時候，將span中的文字設定為取消，如果為false的時候設定為全選。

二.相關閱讀:

（1）.click事件參閱jQuery click事件一章節。

（2）.prop()函式參閱jQuery prop()一章節。

（3）.prop()函式和attr()函式參閱prop()方法和attr()方法的區別一章節。

相關文章