单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是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. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  2. juniper防火墙 L2TP VPN配置

    juniper防火墙 L2TP  VPN配置 建立L2TP_POOL 创建连接的用户: 创建用户组: 更改L2TP的连接池: 更改L2TP的隧道: 设置防火墙的策略: Win7连接:

  3. lucene 3.0.2 + 多文件夹微博数据（时间，微博）构建索引

    package lia.meetlucene; import java.io.File; import java.io.IOException; import java.util.LinkedList ...

  4. lucene 3.0.2 中文分词

    package lia.meetlucene; import java.io.IOException; import java.io.Reader; import java.io.StringRead ...

  5. 在CSV文件中增加一列属性值

    具体参见:系统管理\将文件夹复制到列表中的远程主机   修改前: column1, column2 1,b 2,c 3,5   修改后: column1, column2, column3 1,b, ...

  6. 块级&行内（内联）元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  7. 【转】Java跨平台原理

    原文地址:http://www.cnblogs.com/gw811/archive/2012/09/09/2677386.html 1.是么是平台 Java是可以跨平台的编程语言,那我们首先得知道什么 ...

  8. win7硬盘安装ubuntu双系统——注意项

    WIN7 下硬盘安装ubuntu 12.04 博客分类: ubuntu   仅为网络上的资料整理 资料引用:http://www.ctocio.com.cn/35/12325035.shtml htt ...

  9. mina学习（一）

    Mina:是一个帮助用户开发高性能和高伸缩性网络应用程序的框架 学习地址链接:http://www.cnblogs.com/xuekyo/archive/2013/03/06/2945826.html ...

  10. MySQL问题汇总(持续更新)

    1.This function has none of DETERMINISTIC, NO SQL 原因: Mysql如果开启了bin-log, 我们就必须指定我们的函数是否是 1 DETERMINI ...