核取方塊全選和全不選程式碼例項

admin發表於2017-03-10

下面是一段非常簡單的核取方塊的全選和全不選效果，它的用途非常的廣泛。

程式碼如下:

[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"> 
$(document).ready(function(){
  $("#ck").click(function(){
    if(this.checked){
      $('input[name="antzone"]').attr("checked",true); 
      $("span").text("取消");
    }
    else{
      $('input[name="antzone"]').attr("checked",false); 
    }
  })
})
</script> 
</head> 
 
<body>
<ul>
  <li><input type="checkbox" name="antzone" value="0"/>螞蟻部落一</li>
  <li><input type="checkbox" name="antzone" value="1"/>螞蟻部落二</li>
  <li><input type="checkbox" name="antzone" value="2"/>螞蟻部落三</li>
  <li><input type="checkbox" name="antzone" value="3"/>螞蟻部落四</li>
  <li><input type="checkbox" name="antzone" value="4"/>螞蟻部落五</li>
</ul>
<input type="checkbox" id="ck"/><span>全選</span>
</body> 
</html>

程式碼比較簡單，這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.click事件可以參閱jQuery click事件一章節。

2.attr()函式可以參閱jQuery attr()一章節。 

3.$('input[name="antzone"]')可以參閱jQuery [attribute=value]一章節。

相關文章