欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

input radio取得被选中项的value值

程序员文章站 2022-04-05 14:51:29
...

Jquery 获取选中值，三种方法都可以：

$(‘input: radio:checked’).val()；

$(“input[type=‘radio’]:checked”).val();

$(“input[name=‘sex’]:checked”).val();

原生js获取方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input radio选中状态</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div action="" method="" id="formId">
			<input id="rad1" name="rad" type="radio" value="1" />选项1
			<input id="rad2" name="rad" type="radio" value="2" />选项2
			<input id="rad3" name="rad" type="radio" value="3" />选项3
		</div>
		<button type="button" onclick="btn()">提交</button>
		<script type="text/javascript">
			function btn() {
				// 获取所有input框
				let inputSelect = document.querySelectorAll('input[name="rad"]')
				var obj = {
						radio: [],
						checkbox: []
					},
					value = '';
				// 循环遍历每一个input
				for (var i = 0, len = inputSelect.length; i < len; i++) {
					// 如果是选中状态 且 类型为单选框'radio'
					if (inputSelect[i].checked && inputSelect[i].type === 'radio') {
						obj.radio.push(inputSelect[i].value);
						value += '单选框：' + inputSelect[i].value + '\n';
					}
					if (inputSelect[i].checked && inputSelect[i].type === 'checkbox') {
						obj.checkbox.push(inputSelect[i].value);
						value += '多选框：' + inputSelect[i].value + '\n';
					}
				}
				alert(value);
				console.log(obj)
			}
		</script>
	</body>
</html>
相关标签： js基础 JQuery javascript jquery

上一篇： shell入门（7）——文件判断操作

下一篇： 嵌入式之Shell学习

推荐阅读