jquery表单验证之复选框验证

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 4         <title>表单验证之复选框验证</title>
 5         <style type="text/css">
 6             .infobox {
 7                 margin-top: 10px;
 8             }
 9             .error {
10                 color: red;
11             }
12 
13         </style>
14         <script src="../jquery-1.5.2.js" type="text/javascript"></script>
15         <script type="text/javascript">
16             $(document).ready(function(){
17                 $('.error').hide();
18                 $('.submit').click(function(event) {
19                     var count = 0;
20                     var amt = 0;
21                     $('form').find(':checkbox').each(function(){
22                         if($(this).is(':checked')) {
23                             count++;
24                             amt += parseInt($(this).val());
25                         }
26                     });
27                     
28                     if(count==0) {
29                         $('.error').show();
30                         $('.result').hide();
31                     }
32                     else {
33                         $('.error').hide();
34                         $('.result').show();
35                         $('.result').text('总价为 ' + amt);
36                     }
37                     
38                     event.preventDefault();
39                 });
40             });
41         </script>
42         <body>
43             <form>
44                 <input type="checkbox" id="pizza" value="5" class="infobox">
45                 披萨  $5
46                 <br />
47                 <input type="checkbox" id="hotdog" value="4" class="infobox">
48                 热狗 $4
49                 <br />
50                 <input type="checkbox" id="hamburg" value="3" class="infobox">
51                 汉堡 $3
52                 <br />
53                 <p class="error">
54                     至少必须选择一个
55                 </p>
56                 <p class="result">
57                 </p>
58                 <input class="submit" type="submit" name="submit" value="提交">
59             </form>
60         </body>
61 </html>
posted on 2017-01-21 21:12 Sharpest 阅读(487) 评论(0) 收藏举报