利用jQuery选择器获取单选按钮所选的值和一组checkbox选项的值

最新推荐文章于 2023-05-31 08:45:57 发布

weixin_30950607

最新推荐文章于 2023-05-31 08:45:57 发布

阅读量380

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zhrujia/p/9485132.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script src="Script/jquery-3.3.1.js"></script>
	<script type="text/javascript">


	$(function () {
	$("input:button").click(function (event) {
	str = "";
	str += "姓名：" + $(":text").val() + "\n";
	str += "性别：" + $(":radio:checked").next().text() + "\n";
	str += "爱好：";
	like = [];
	$(":checkbox:checked").each(function (index, el) {
	like.push($(this).next().text());
	});
	str += like.join(",");
	alert(str);
	});
	})
	</script>
	</head>
	<body>
	<form>
	<div style="width:400px;">
	姓名：<input type="text" /><br /><br />
	性别：<input type="radio" name="sex" value="1" />
	<span>男</span>
	<input type="radio" name="sex" value="2" /><span>女</span><br /><br />
	爱好：<input type="checkbox" name="like" value="游泳" /><span>游泳</span>
	<input type="checkbox" name="like" value="爬山" /><span>爬山</span>
	<input type="checkbox" name="like" value="打球" /><span>打球</span>
	<input type="checkbox" name="like" value="骑车"/><span>骑车</span>
	<input type="checkbox" name="like" value="阅读"/><span>阅读</span>
	<input type="checkbox" name="like" value="聊天" /><span>聊天</span><br /><br />
	<center><input type="button" value="提交" style="background-color:forestgreen; width:100px;height:40px;"/>
	<input type="reset" value="重置" style="background-color:forestgreen;width:100px;height:40px;"/></center>
	</div>
	</form>
	</body>
	</html>