复选框全选和选不选代码实例

复选框全选和选不选代码实例:
下面是一段非常简单的复选框的全选和全不选效果，它的用途非常的广泛，具体有哪些用途这里就不多介绍了。
代码如下:

<!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.checked属性可以参阅javascript的checkbox.checked属性一章节。
3.attr()函数可以参阅jQuery的attr()方法一章节。
4.$('input[name="antzone"]')可以参阅jQuery的[attribute=value]选择器一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12640

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]