单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是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. 微信企业号办公系统-JSSDK上传图片（多图上传）

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  2. tomcat6.0安装

    tomcat的安装基本是一步一步按提示来就行了: 这里填写用户名和密码,自己一定要记住啊,下面是路径的选择 然后查看安装成功与否,打开浏览器输入 然后看到下面页面就可以了

  3. OC中属性及方法

    1.声明式属性    a.实例变量    b.声明属性        自动生成setter/getter方法        .h ->@property 属性类型 属性名;        .m ...

  4. DS实验题 Old_Driver UnionFindSet结构

    题目 思路 很典型的并查集问题,朋友A和B要合并到一个统一的集合中,也就是Union(A, B)操作,在Union操作中需要先找到A所属的集合的代表元和B所属集合的代表元,也就是使用Find(A)和F ...

  5. MySQL 数据库设计 笔记与总结（4）维护优化

    [维护和优化的工作] ① 维护数据字典 ② 维护索引 ③ 维护表结构 ④ 在适当的时候对表进行水平拆分或垂直拆分 [维护数据字典] a 使用第三方工具对数据字典进行维护 b 利用数据库本身的备注字段来 ...

  6. SSH 基础

    什么是SSH? 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务程序的安全验 ...

  7. 20145225 实验四《Andoid开发基础》

    实验内容 搭建Android环境 运行Android 修改代码,能输出学号 实验步骤 安装Android Studio 安装Android的SDK 运行Andriod Studio并在模拟手机上显示自 ...

  8. MVC @functions

    asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们 ...

  9. 五一结束,北戴河,yy,差一点,不太敢

    collectionView Cell 设置颜色,蓝色,但是其他cell颜色也蓝色了,因为只写了if 没写else if (indexPath.item == 0) { cell.background ...

  10. SQL_NO_CACHE

    http://dev.mysql.com/doc/refman/5.7/en/query-cache-in-select.html MySQL 5.7 Reference Manual  /  ... ...