单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是HTML元素，所以对于JavaScript而言也表示对象。

注意：单选钮的特点是一定要需要名相同才可以实现，所以此处如果名字相同，那么就是对象数组，document.all()取得。单选钮有一种默认选中的状态，checked属性，这返回的his布尔类型。

范例：取得单选钮数据

代码：

<!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>

默认性别是男，截图如下：

选择男时，弹框截图如下：

选择女时，弹框截图如下

JavaScript：单选钮的事件处理的更多相关文章

  1. FusionCharts JavaScript API - Events 全局事件处理

    FusionCharts JavaScript API - Events 全局事件处理 Home > FusionCharts XT and JavaScript > API Refere ...

  2. 微信小程序 改变radio（单选钮）默认大小

    /* 单选钮样式 */ radio { transform:scale(0.5); }

  3. JavaScript：文本域事件处理

    文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...

  4. JavaScript：下拉列表框的事件处理

    下拉列表框处理操作主要使用的是一个onchang的事件,此事件描述的是内容改变后行为. 范例:观察下拉列表框的事件处理 代码: <!doctype html> <html lang ...

  5. 006.MFC_对话框_复选框_单选钮

    对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Ca ...

  6. javascript中的onmousewheel事件处理

    滚轮事件在不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,FF也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...

  7. Javascript为元素添加事件处理函数

    document.getElementById("test").onclick = function(){ ... };

  8. 原生javascript跨浏览器常用事件处理

    var eventUntil = {             getEvent: function (event) {//获取事件                 return event ? eve ...

  9. Python3 tkinter基础 Radiobutton 创建三个单选钮

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

随机推荐

  1. VTK 6 和 VTK 5 的不同

    Overview Replacement of SetInput() with SetInputData() and SetInputConnection() Removal of GetProduc ...

  2. _jobdu_1384：二维数组中的查找

    /************************************************************************/ /* 题目描述: 在一个二维数组中,每一行都按照从 ...

  3. 滴答数必须介于 DateTime.MinValue.Ticks 和 DateTime.MaxValue.Ticks 之

    一个莫名其妙的问题:错误 滴答数必须介于 DateTime.MinValue.Ticks 和 DateTime.MaxValue.Ticks 之间. 参数名:ticks.这 网上找了很多,都没有一个正 ...

  4. 分布式架构高可用架构篇_08_MyCat在MySQL主从复制基础上实现读写分离

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  5. FastDFS常见命令

    1: 启动FastDFS tracker: ./fdfs_trackered  .../tracker.conf storage: ./fdfs_storaged  .../storage.conf ...

  6. 2016.10.08,英语,《Verbal Advantage》Level1 Unit1-4

    这本书学的很辛苦,总共10个Level,每个Level有5个Unit,每个Unit10个单词,实际上自己差不多一天才能学完1个Unit10个单词.(当然,一天我只能花大约1个小时左右在英语上) 而且跟 ...

  7. UITableview xib里面 cell 按钮的回调

    //  MoreBtnCell.m#import <UIKit/UIKit.h> @interface MoreBtnCell : UITableViewCell @property (w ...

  8. 4.PHP内核探索：单进程SAPI生命周期

    CLI/CGI模式的PHP属于单进程的SAPI模式.这类的请求在处理一次请求后就关闭.也就是只会经过如下几个环节: 开始 - 请求开始 - 请求关闭 - 结束 SAPI接口实现就完成了其生命周期. 单 ...

  9. oracle utf8字符集转gbk(转)

    近日有同事在外面部署系统时,安装数据库时可能选择了UTF-8编码格式,导入insert语句时,一个汉字被认为三个字节,这是不行的. 结合上网搜到的资料,将oracle数据库的编码格式,从utf-8改为 ...

  10. Advanced CSharp Messenger

    http://wiki.unity3d.com/index.php?title=Advanced_CSharp_Messenger Author: Ilya Suzdalnitski Contents ...