1.
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>
