单选按钮事件：
单选钮属于多选一的处理流程，但是单选钮由于也是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. iOS开发之--UITextField属性

    UITextField属性 0.     enablesReturnKeyAutomatically 默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...

  2. Qt5 和 Qt4 的一些改动和不同

    Qt5从Qt4升级后,很多原来Qt4中定义的函数或者变量由于种种原因在Qt5中被遗弃,所以用Qt5来编译Qt4的一些工程项目时,难以避免的会需要修改一些地方,下面就罗列一些我遇到的一些需要修改的地方: ...

  3. [百科] - SIP（会话发起协议）

    SIP(会话发起协议)SIP是类似于HTTP的基于文本的协议.SIP可以减少应用特别是高级应用的开发时间.由于基于IP协议的SIP利用了IP网络,固定网运营商也会逐渐认识到SIP技术对于他们的深远意义 ...

  4. hdu Line belt

    这道题是一道3分搜索的题.其实这种题很多时候都出现在高中的解析几何上,思路很简单,从图中可以看到,肯定在AB线段和CD线段上各存在一点x和y使得所花时间最少 因为AB和CD上的时间与x和y点的坐标都存 ...

  5. 当Editplus遇到Java的Scanner

    学习Java编程时,我想让变量的值从键盘输入接收进来.平时在dos中运行效果很直观,那么我在Editplus这款开发工具中也可以输入,Editplus是带有控制台.当你运行Java程序时,此时出现的编 ...

  6. Eclipse问题提示

    记录下来以下两种方法: 一.只弹出简单的单词提示(如输入system.的时候自动弹出out.in等字段的那种): 点击eclipse上面的windows --> preferences --&g ...

  7. mysql语句优化认识

  8. memache session

    Memcache和PHP memcach扩展安装请见http://koda.iteye.com/blog/665761 设置session用memcache来存储 方法I: 在 php.ini 中全局 ...

  9. C#委托初探

    委托是一种定义方法签名的类型,可以与具有兼容签名的任何方法关联.您可以通过委托调用其中已添加的方法列表.委托用于将方法作为参数传递给其他方法.事件处理程序就是通过委托调用的方法.您可以创建一个自定义方 ...

  10. c#循环迭代匿名类链表（可迭代的匿名类）

    Main(){ //为什么?object是基类啊!! //报错.不能从List<anonymous>换成List<object>. //var q=(List<objec ...