JavaScript十：表单二：单选按钮

单选按钮的设置方法：●单选按钮，可以利用name属性分组，同组内只能选中一个；name相同也方便后面通过name获得单选按钮所有选型的一个数组；● <input type="radio" name="sex" value="1">男value的值是传递到后台的值；可以通过如下，获取value属性的值：●checked="checked" ：默认选中的单选项：● document.get

小枯林

7122人浏览 · 2020-12-28 18:26:18

小枯林 · 2020-12-28 18:26:18 发布

单选按钮的设置方法：

● 单选按钮，可以利用设置相同的name属性来分组，达到同组内只能选中一个的效果；name相同也方便后面通过name获得单选按钮所有选项的一个数组；

● <input type="radio" name="sex" value="1">男 value的值是传递到后台的值；

可以通过如下，获取value属性的值：

● checked="checked" ： 默认选中的单选项：

● document.getElementsByName(name); 对于单选按钮来说，这个可以通过name获取该单选按钮组中的所有项目，得到的是一个数组；数组中的元素是“一个单选按钮组的对象”；可以通过对象的value属性获取该项的值（value）；

● sex[0].checked：判断某个单选按钮是否被选中，被选中返回true，否则返回的false；经常用于逻辑判断

完整示例程序：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  <!--add()方法输出中文出现了乱码，这儿指定下编码方式-->
	<title>js</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<form>
		<label>用户名</label><input type="text" id="userName1" name="userName"
		value="文本框默认显示值"><br>
		<input type="radio" name="sex" value="1" checked="checked">男
		<input type="radio" name="sex" value="0">女<br>
		<input type="button" value="BTNNN" id="button1" onclick="show1()" name="">
	</form>
</body>
</html>

function show1(){
	var sex = document.getElementsByName("sex"); 
	var sexTest;
	if (sex[0].checked) {
		sexTest = sex[0].value;
	}else{
		sexTest = sex[1].value;
	}
	alert(sexTest);
}

效果：