JavaScript：单选钮的事件处理

时间：2016-09-02 00:17:15 阅读：191 评论：0 收藏：0 [点我收藏+]

标签：

单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是HTML元素，所以对于JavaScript而言也表示对象。
范例：取得单选钮数据
<!doctype html>
　　<html lang="zh-CN">
　　<head>
　　　　<meta charset="utf-8">
　　　　<meta name="description" content="all kinds of input">
　　　　<meta name="keywords" content="input,html">

　　　　<title>单选钮的测试</title>

　　　　<script type="text/javascript">
　　　　　　　　window.onload = function () {
　　　　　　　　　　document.getElementById(‘showBtn‘).addEventListener(‘click‘,function() {
　　　　　　　　　　var sexArr = document.all(‘sex‘);
　　　　　　　　　　if (sexArr[0].checked) {
　　　　　　　　　　　　　alert("性别是：" + sexArr[0].value);
　　　　　　　　　　}else{
　　　　　　　　　　　　　　alert("性别是：" + sexArr[1].value);
　　　　　　　　　　}

　　　　　　},false);
　　　　}
　　　　</script>

　　</head>
<body>
　　<form action="">
　　　　性别：<input type="radio" name="sex" id="sex" value="male - 男" checked="yes">男
　　　　<input type="radio" name="sex" id="sex" value="female - 女">女<br/>
　　　　<input type="button" id="showBtn" value="选择"></input>
　　</form>
</body>
</html>

代码：

<!doctype html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8">
     <meta name="description" content="all kinds of input">
     <meta name="keywords" content="input,html">

      <title>单选钮的测试</title>

    <script type="text/javascript">
        window.onload = function () {
           document.getElementById(‘showBtn‘).addEventListener(‘click‘,function() {
                var sexArr = document.all(‘sex‘);
                if (sexArr[0].checked) {
                   alert("性别是：" + sexArr[0].value);
                }else{
                  alert("性别是：" + sexArr[1].value);
                }
                
           },false);
        }
    </script>

  </head>
    
  <body>
          <form action="">
               性别：<input type="radio"  name="sex" id="sex" value="male - 男" checked="yes">男
               <input type="radio"  name="sex" id="sex" value="female - 女">女<br/>
               <input type="button" id="showBtn" value="选择"></input>
          </form>
  </body>
</html>