jQuery mobile 学习09 单选框和复选框的使用

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/>
        
    <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script>

</head>

<body>
   <div data-role="page" id="a">
   	<div data-role="header" data-position="fixed" data-theme="b">
   		<h2>
   			a页面的标题
   		</h2>
   	</div>
   	
   	
   	<!-- input标签上必须加上id属性,下面的label标签的for属性必须指向该id才能符合jqm的规则,否则没有效果 -->
   	<div data-role="content">
   		<p>a页面的内容</p>
   		<br>
   			<form action="">
 				<fieldset data-role="controlgroup">
 					<legend><b>JQM表单学习</b></legend>
 					<legend>爱好:</legend>
 					
 					<input id="chb1" type="checkbox" name="love" value="1">
 					<label for="chb1">攀岩</label>
 					
 					<input id="chb2" type="checkbox" name="love" value="2">
 					<label for="chb2">长跑</label>
 					
 					<input id="chb3" type="checkbox" name="love" value="3">
 					<label for="chb3">跑酷</label>
 				</fieldset>
 				
 				<br/>
 				
 				<h3>水平的表现形式</h3>
 				<fieldset data-role="controlgroup" data-type="horizontal">
 					<legend>爱好:</legend>
 					
 					<input type="checkbox" name="love" value="1" id="chb1">
 					<label for="chb1">乒乓球</label>
 					
 					<input type="checkbox" name="love" value="2" id="chb2">
 					<label for="chb2">足球</label>
 					
 					<input type="checkbox" name="love" value="3" id="chb3">
 					<label for="chb3">篮球</label>
 				</fieldset>
 				
 				<br/>
 				
 				<fieldset data-role="controlgroup">
					<legend>性别选择:</legend>
					
					<input type="radio" name="sex" id="r1" value="m">
					<label for="r1">暖男</label>
					
					<input type="radio" name="sex" id="r2" value="w">
					<label for="r2">浪女</label>
					
 				</fieldset>
 				
 				<br>
 				
 				<fieldset data-role="controlgroup" data-type="horizontal">
 					<legend>性别选择:(水平样式)</legend>
 					
 					<input type="radio" name="sex" id="s1" value="m">
 					<label for="s1">帅哥</label>
 					
 					<input type="radio" name="sex" id="s2" value="w">
 					<label for="s2">美女</label>
 					
 				</fieldset>
 				
 				
			</form>
			
			
			
   	</div>
   	<div data-role="footer" data-theme="a" data-position="fixed">
   		<h2>a页面的底部</h2>
   	</div>
   </div>

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值