全选全不选

最新推荐文章于 2024-10-01 20:12:28 发布

chiquan5554

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/javaGeeker/blog/674575

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){

       var $items = $(":checkbox[name=items]");

       $("#checkedAllBtn").click(function(){
           $items.add("#checkedAllBox").attr("checked",true);
       });
       $("#checkedNoBtn").click(function(){
           $items.add("#checkedAllBox").attr("checked",false);
       });
       $("#checkedRevBtn").click(function(){
           $(":checkbox[name=items]").each(function(){
               this.checked = !this.checked;
           });
           $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
       });
       $("#checkedAllBox").click(function(){
           $items.attr("checked",this.checked);
       });
       $items.click(function(){
           $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));
       });
       $("#sendBtn").click(function(){
           $items.filter(":checked").each(function(){
               alert(this.value);
           });
       });
   });
</script>
</head>
<body>
   <form method="post" action="">
       你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

       <br />
       <input type="checkbox" name="items" value="足球" />足球
       <input type="checkbox" name="items" value="篮球" />篮球
       <input type="checkbox" name="items" value="羽毛球" />羽毛球
       <input type="checkbox" name="items" value="乒乓球" />乒乓球
       <br />
       <input type="button" id="checkedAllBtn" value="全　选" />
       <input type="button" id="checkedNoBtn" value="全不选" />
       <input type="button" id="checkedRevBtn" value="反　选" />
       <input type="button" id="sendBtn" value="提　交" />
   </form>
</body>
</html>

转载于:https://my.oschina.net/javaGeeker/blog/674575