首页 > 代码库 > JavaScript:单选钮的事件处理

JavaScript:单选钮的事件处理

单选按钮事件:
单选钮属于多选一的处理流程,但是单选钮由于也是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="http://www.mamicode.com/male - 男" checked="yes">男
    <input type="radio" name="sex" id="sex" value="http://www.mamicode.com/female - 女">女<br/>
    <input type="button" id="showBtn" value="http://www.mamicode.com/选择"></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="http://www.mamicode.com/male - 男" checked="yes"><input type="radio"  name="sex" id="sex" value="http://www.mamicode.com/female - 女">女<br/>               <input type="button" id="showBtn" value="http://www.mamicode.com/选择"></input>          </form>  </body></html>

默认性别是男,截图如下:

技术分享

选择男时,弹框截图如下:

技术分享

选择女时,弹框截图如下

技术分享

JavaScript:单选钮的事件处理