<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#anniu:hover{
cursor: pointer;
}
</style>
</head>
<body>
<!--单选按钮的取值-->
<div id="anniu" onclick="xuanze()">
点击选择单选项选中的值
</div>
<input type="radio" name="sex" id="sex1" value="男" />男
<input type="radio" name="sex" id="sex2" value="女" />女
<br />
<!--多选框的选择-->
<input type="checkbox" name="duoxuan" id="duoxuan1" value="关羽" />关羽
<input type="checkbox" name="duoxuan" id="duoxuan2" value="张飞" />张飞
<input type="checkbox" name="duoxuan" id="duoxuan3" value="赵云" />赵云
<input type="checkbox" name="duoxuan" id="duoxuan4" value="黄忠" />黄忠
<input type="checkbox" name="duoxuan" id="duoxuan5" value="马超" />马超
<input type="checkbox" name="quanxuan" id="quanxuan" value="" onclick="qx()"/>五虎上将
<br />
<!--下拉框的选择-->
<select name="" id="xiala" onchange="bian()">
<option value="熊猫">熊猫</option>
<option value="金丝猴">金丝猴</option>
<option value="鹤顶红">鹤顶红</option>
<option value="白鳍豚">白鳍豚</option>
</select>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
}
//单选业务的取值
function xuanze(){
var sexattr = document.getElementsByName("sex");
for (var i = 0;i <sexattr.length;i++) {
if(sexattr[i].checked){ //因为本身返回的就是true，所以直接可以进
alert("您选择的性别为：" + sexattr[i].value);
}
}
}
function qx(){
var duoxuan = document.getElementsByName("duoxuan");
var quanxuan = document.getElementById("quanxuan");
for (var i = 0; i < duoxuan.length;i++) {
if(quanxuan.checked){
duoxuan[i].checked = true;
}else{
duoxuan[i].checked = false;
}
}
}
function bian(){
var xiala = document.getElementById("xiala");
alert(xiala.value);
}
</script>