HTML中的单选框和复选框及其选择

最新推荐文章于 2024-08-01 21:41:04 发布

常戚戚

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量4.1k

点赞数

http://blog.163.com/sky20081816@126/blog/static/164761023201052532729217/

单选<radio>,但是要注意此时需要把对象的name 属性设置为相同 ps　不是ＩＤ　，只有这样才会实现单选的效果，不然几个选项都是单独的没有联系的单选。

复选<checkbox> 这里每个选项都是单独的，它的name不需要相同，这里是不是也可以用<radio> 作为复选框，只是把name设置为不同。

判断下拉框哪个选项被选中：

使用selectedIndex ，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="form1">
<select name="se1" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>

<script>
/*判断下拉框选择的是哪个*/
var the_index = document.form1.se1.selectedIndex; /*选项的索引号PS从0 开始*/
var the_selected = document.form1.se1.options[the_index].value;/*索引的数组的选项值*/
alert(the_selected);
</script>
</body>
</html>

判断复选框哪个选项被选中：PS 但是选中复选框之后需要刷新一下才才弹出刚才选项值

<body>
<form name="form1">
<input type="checkbox" name="up" value="起床">起床
<input type="checkbox" name="up" value="洗漱">洗漱
<input type="checkbox" name="up" value="迟早饭">吃早饭
</form>

<script type="text/javascript">
var up = document.form1.up;
var alls="";
for (var i=0;i<up.length;i++){
	if(up[i].checked==true)/*某一项被选中了*/
		{
		alls=alls +" "+ up[i].value;
		/*这里的value和select 中的不同，input 后面的是没办法取的，只能value的值和后面一样，取value的值*/
		}	
}
alert(alls);

</script>
</body>

单选框JS的基本不变