这两天在学习javascript，把平时用到的获取单选按钮，复选按钮，还有下拉列表值的方法，总结了一下，便于以后查询。
<html>
<head>
<meta charset=utf-8 />
<title>单选，复选，下拉框</title>
<style type="text/css">
.Tab1 table{
border:1px solid black;
border-collapse: collapse;
}
.Tab1 td {
border:1px solid black;
height: 10px;
width: 100px;
text-align: center;
}
</style>
<script type="text/javascript">
//获取单选按钮的值
function getRadioValue(sex) {
var radios = document.getElementsByName(sex);
for (var i = 0; i < radios.length; i++) {
if(radios[i].checked) {
if(radios[i].value === "male"){
document.getElementById('dispSex').value = "男";
}else{
document.getElementById('dispSex').value = "女";
}
}
}
}
//通过修改值改变选中的单选按钮
function changeRadioValue (sex,radioValue) {
var radios = document.getElementsByName(sex);
for (var i = 0; i < radios.length; i++) {
if(radios[i].value === radioValue) {
radios[i].checked = true;
return;
}
}
}
//点击按钮改变选中的单选按钮
function changeRadioValue2 (sex) {
var radios = document.getElementsByName(sex);
for (var i = 0; i < radios.length; i++) {
if(radios[i].checked) {
radios[i].checked = false;
if(i+1 >= radios.length){
i = -1;
}
radios[i+1].checked = true;
return;
}
}
}
//获取多选按钮的值
function getCheckboxValue(city) {
var cities = document.getElementsByName(city);
var selectCities = [];
//var sc = "";
for (var i = 0; i < cities.length; i++) {
if (cities[i].checked) {
selectCities[selectCities.length] = cities[i].value;
//selectCities.push(cities[i].value);
//sc += cities[i].value + ",";
//三种方式效率比较："+=" > "arr[arr.length] = value" > arr.push(value)，是这样吗？
}
}
document.getElementById('dispCity').value = selectCities.join();
//document.getElementById('dispCity').value = sc;
}
//获取下拉列表的值
function getSelectValue (car) {
var cars = document.getElementById(car);
if(cars.options[0].selected) {//判断某项是否被选中
alert("第一项被选中");
}
document.getElementById('dispIndex').value = cars.options.selectedIndex+1;
document.getElementById('dispValue').value = cars.options[cars.selectedIndex].text;
}
</script>
</head>
<body>
<div class="Tab1">
<table>
<tr>
<td>男<input type="radio" checked="checked" name="sex" value="male"></td>
<td>女<input type="radio" name="sex" value="female"></td>
<td><input type="button" value="getValue" οnclick="getRadioValue('sex')"></td>
<td><input type="button" value="changeValue" οnclick="changeRadioValue2('sex')"></td>
<td><input type="text" id="dispSex"></td>
</tr>
<tr>
<td>北京<input type="checkbox" name="city" value="北京"></td>
<td>天津<input type="checkbox" name="city" value="天津" checked="checked"></td>
<td><input type="button" value="getValue" οnclick="getCheckboxValue('city')"></td>
<td><input type="text" id="dispCity"></td>
</tr>
<tr>
<td colspan="2">
<select id="car" >
<option value="baoma">宝马</option>
<option value="benchi" selected="selected">奔驰</option>
<option value="aodi">奥迪</option>
<option value="fengtian">丰田</option>
</select>
</td>
<td><input type="button" value="ClickMe" οnclick="getSelectValue('car')"></td>
<td><input type="text" id="dispIndex"></td>
<td><input type="text" id="dispValue"></td>
</tr>
</table>
</div>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)