jquery表单验证之单选按钮验证

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>表单验证之单选按钮验证</title>
 8         <style type="text/css">
 9             .infobox {
10                 margin-top: 10px;
11             }
12             .error {
13                 color: red;
14             }
15 
16         </style>
17         <script src="jquery-1.5.2.js" type="text/javascript"></script>
18         <script type="text/javascript">
19             $(document).ready(function(){
20                 $('.error').hide();
21                 $('.submit').click(function(event) {
22                     var count = $('input:checked').length;
23                     if(count==0) {
24                         $('.error').show();
25                         $('.result').hide();
26                     }
27                     else {
28                         $('.error').hide();
29                         $('.result').show();
30                         $('.result').text('你选择了 ' + $('input:checked').attr('value'));
31                     }
32                     
33                     event.preventDefault();
34                 });
35             });
36         </script>
37         <body>
38             <form>
39                 <input type="radio" name="paymode" value="信用卡支付" class="infobox">
40                 信用卡
41                 <br />
42                 <input type="radio" name="paymode" value="礼品卡支付" class="infobox">
43                 礼品卡
44                 <br />
45                 <input type="radio" name="paymode"  value="消费券支付" class="infobox">
46                 消费券
47                 <br />
48                 <p class="error">
49                     请选择支付方式!
50                 </p>
51                 <p class="result">
52                 </p>
53                 <input class="submit" type="submit" name="submit" value="提交">
54             </form>
55         </body>
56 </html>
posted on 2017-01-18 23:27 Sharpest 阅读(457) 评论(0) 收藏举报