JSP----复选框(点击文字选中复选框)

版权声明:原创不易,转载请注明出处~ https://blog.csdn.net/qq_34266804/article/details/87429535

如上图所示,必须选中复选框才可以选中。代码如下图所示:

 <body>
  	<span style='color:red;font-size:30px;'>
    This is my JSP page. <br>
 	</span>
 
 		<form action="hello1" method="post">
 			<label>姓名:</label>
 				<input name="name"><br>
 			
 				QQ:
 				<input type="checkbox" name="contact" value="qq"/>
 				Tel:
 				<input type="checkbox" name="contact" value="Tel"/>
 				WeChat:
 				<input type="checkbox" name="contact" value="WeChat"/><br>
 				
 				<input type="submit" value="OK"/>
 			
 		</form>
 	
  </body>

但是我们想要实现的下图那样,点击文字就可以选中复选框,比较简洁些:

方法一:加id的

代码如下图所示:

<body>
  	<span style='color:red;font-size:30px;'>
    This is my JSP page. <br>
 	</span>
 
 		<form action="hello1" method="post">
 			<label>姓名:</label>
 				<input name="name"><br>
 			
 				<label for="qq">QQ:</label>
 				<input id="qq" type="checkbox" name="contact" value="qq"/>
 				<label for="Tel">Tel:</label>
 				<input id="Tel" type="checkbox" name="contact" value="Tel"/>
 				<label for="WeChat">WeChat</label>
 				<input id="WeChat" type="checkbox" name="contact" value="WeChat"/><br>
 				
 				<input type="submit" value="OK"/>
 			
 		</form>
 	
  </body>

方法二:不需要加id的,用lable将对应的包住就可以了

代码:

扫描二维码关注公众号,回复: 5218197 查看本文章
<body>
	<span style='color:red;font-size:30px;'> This is my JSP page. <br>
	</span>

	<form action="hello1" method="post">
		<label>
		姓名: 
		<input name="name"><br>
		</label>
		 <label>
		 QQ:
		<input type="checkbox" name="contact" value="qq" />
		</label> 
		<label>
		Tel: 
		<input type="checkbox" name="contact" value="Tel" />
		</label> 
		<label>
		WeChat 
		<input type="checkbox" name="contact" value="WeChat" /><br>
		</label> 
		<input type="submit" value="OK" />

	</form>

</body>

猜你喜欢

转载自blog.csdn.net/qq_34266804/article/details/87429535