jQuery核取方塊全選和全不選效果程式碼

antzone發表於2017-04-19
jQuery

核取方塊的全選和全不選效果在大量網站都有應用，可以說幾乎絕大多數網站都有這樣的功能，尤其是在批量進行管理的時候，下面就介紹一下如何利用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 chkAll(obj) {
  var name = $(obj).attr("name");
  $(":checkbox").each(function () {
    this.checked = obj.checked;
  });
}
$(document).ready(function(){
  $(":checkbox[name=cAll]").click(function(){
    chkAll(this)
  })
})
</script>
</head>
<body>
<div >
  <input type="checkbox" name="cAll"/>全選/全不選</span>
  <input type="checkbox" name="antzone" value="螞蟻部落一"/>螞蟻部落一
  <input type="checkbox" name="antzone" value="螞蟻部落二"/>螞蟻部落二
  <input type="checkbox" name="antzone" value="螞蟻部落三"/>螞蟻部落三
  <input type="checkbox" name="antzone" value="螞蟻部落四"/>螞蟻部落四
</div>
</body>
</html>

以上程式碼實現了我們的要求，實現了全選和不全選效果。

相關文章