单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是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. v.size() return size_t not int 返回无符号整型数

    In the C++ STL, the vector size() function return size_t, which is unsigned int, not int. So imagine ...

  2. [转]如何：定义和处理 SOAP 标头

    本文转自:http://msdn.microsoft.com/zh-cn/library/vstudio/8728chd5(v=vs.100).aspx 本主题专门介绍一项旧有技术.现在应通过使用以下 ...

  3. Net-Speeder为OpenVZ加速

    VPS购买地址 1. net-speeder安装 wget https://coding.net/u/njzhenghao/p/download/git/raw/master/net_speeder- ...

  4. 分布式架构高可用架构篇_01_zookeeper集群的安装、配置、高可用测试

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

  5. JavaWEB前端向服务器端发送对象

    最近项目中需要做一个关于批量删除的功能,删除条件有多个,需要从页面全部传给后台服务器程序,单个的删除,可以拼接参数给url,服务器端获取参数后执行删除操作即可.但是批量删除多个,参数会很多,传递就有些 ...

  6. linux redis迁移

    在原服务器上的redis执行save命令后,生成了dump文件,拷贝到新服务器的安装目录,可能是版本问题,数据无法还原. 针对这个问题, 1.在配置文件中加入: slave of 原服务器的ip和端口 ...

  7. DirectX 发展历程

    在Windows下开发游戏,大家都会联想到DirectX.实际上,DirectX并不等同于游戏,它也不是写游戏程序的唯一选择.其实,DirectX只是提供了一种更直接的控制硬件的API库而已.当然,它 ...

  8. endsWith和startsWith同样效果其他形式的写法（2016.1.12）

    //判断以什么开始startWith str = "abcdef"; //用其他的形式写的startsWith if(str.indexOf("abc")==0 ...

  9. bug 发表文章不显示图片

    bug 描述: 现象是我们这不能发布图片, 测试说患教方向是可以正常发布图片的(还是要感激测试,正是他们鞭策我们不断挑战困难,解决之,从而提高自己姿势水平). 图片没上传上去, 服务端协助查找发现没调 ...

  10. Flink - Generating Timestamps / Watermarks

    https://ci.apache.org/projects/flink/flink-docs-release-1.0/apis/streaming/event_timestamps_watermar ...