checkbox全选，全不选-阿里云开发者社区

checkbox全选，全不选

2017-11-12 1143

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'test1.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   
   <script src="js/jquery-2.1.1.min.js" type="text/javascript">

   </script>
</head>

<body>
   <form action="#" id="form">
        <div>
           <input type="text" name="username" placeholder="用户名" id="usernmae"><br>
           <input type="password" name="password" placeholder="密码" id="password"><br>

        </div>
       <div>
           <input type="checkbox" name="all" id="all">全选
           <input type="checkbox" name="all" id="all-res">全不选<br>
           <input type="checkbox" name="perfer" id="perfer" value="篮球">篮球<br>
           <input type="checkbox" name="perfer" id="perfer" value="羽毛球">羽毛球<br>
           <input type="checkbox" name="perfer" id="perfer" value="乒乓球">乒乓球<br>
       </div>
   </form>
</body>
<script language="JavaScript">
   $("form #all").click(function(){
       var $s=$("form #perfer");
       var $text="";
       for(var i=0;i<$s.length;i++){
           if($s[i].checked){
               $text+=$s[i].value;
           }else{
               $($s[i]).attr("checked","checked");
           }
       }
   $("form #all-res").removeAttr("checked");
       alert($text);

   });

   $("form #all-res").click(function(){
       var $s=$("form input[name='perfer']");
       $($s).each(function(){
           $(this).removeAttr("checked");
       });
       $("form #all").removeAttr("checked");
   });
</script>
</html>

本文转自 matengbing 51CTO博客，原文链接:http://blog.51cto.com/matengbing/1865945

checkbox全选，全不选

热门文章

最新文章

相关电子书