jQuery实现遍历单选框

最新推荐文章于 2024-06-20 15:11:50 发布

翱翔天地

最新推荐文章于 2024-06-20 15:11:50 发布

阅读量6.7k

点赞数 3

分类专栏： JQuery 文章标签： jQuery 单选框

本文链接：https://blog.csdn.net/you23hai45/article/details/51472909

版权

JQuery 专栏收录该内容

222 篇文章 2 订阅

订阅专栏

1、问题背景

有四个单选框，分别为一年四季，现在需要判断是否选中，如果选中这个单选框，就将其值赋值给输入框

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>遍历单选框</title>
		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
		<style>
		   #result{
		   	  width: 200px;
		   }
		</style>
		<script>
			$(document).ready(function(){
				$("#season").click(function(){
					var season = "";
					$("input[name='rad']").each(function(i){
						if($(this).is(":checked"))
						{
							season += "您选择的是一年的第" + (i+1) + "季度：" + $(this).val();
						}
					});
					$("#result").val(season);
				});
			});
		</script>
	</head>
	<body>
		<div>
			<input type="radio" name="rad" id="spring" value="春季" />
			<label for="spring">春季</label>
			<input type="radio" name="rad" id="summer" value="夏季" />
			<label for="summer">夏季</label>
			<input type="radio" name="rad" id="autumn" value="秋季" />
			<label for="autumn">秋季</label>
			<input type="radio" name="rad" id="winter" value="冬季" />
			<label for="winter">冬季</label><br>
			<input type="text" id="result" /><br>
			<input type="button" id="season" value="季节"/>
		</div>
	</body>
</html>

3、实现结果