checkbox全選和取消全選完整程式碼例項

antzone發表於2017-03-15

本章節分享一段程式碼例項能夠實現核取方塊的全選和取消全選效果，論壇有其他教程已經詳細分解了此功能是如何實現的，但是很多使用者需要的僅僅是一個完整的程式碼，而不是將程式碼拆解，這反而影響了使用者的參考之用。

程式碼如下:

[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>

以上程式碼就是一個完整的例項，可以直接進行執行，當然如果要放置到本地執行，需要引入自己的jquery檔案，如果想了解它的具體實現過程，可以在本站搜尋其他的實現教程有具體的介紹。

相關文章