JavaScript:单选钮的事件处理

单选按钮事件:
单选钮属于多选一的处理流程,但是单选钮由于也是HTML元素,所以对于JavaScript而言也表示对象。
范例:取得单选钮数据
<!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>

代码:

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

默认性别是男,截图如下:

选择男时,弹框截图如下:

选择女时,弹框截图如下

时间: 2024-12-22 04:34:09

JavaScript:单选钮的事件处理的相关文章

jquery操作单选钮代码示例

jquery操作单选钮代码示例:radio单选按钮是最重要的表单元素之一,下面介绍一下常用的几个jquery对radio单选按钮操作.一.取消选中: $(".theclass").each(function(){ if($(this).attr('checked')) { $(this).attr('checked',false); } }); 以上代码可以将class属性值为theclass的被选中单选按钮取消选中.二.获取被选中的单选按钮的值: var val=$('.thecla

JavaScript的事件_事件处理函数概述与鼠标事件的处理函数

一.事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件. 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是:onclick. 对于每一个事件,它都有自己的触发范围和方式,如果超出了触发范围和方式,事件处理将失效. 二.鼠标事件:页面所有元素都可触发 1.click:当用户单击鼠标按钮或按下回车键时触发. <script type="text/javascript"> windo

JavaScript:文本域事件处理

文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态:     任意输入一个字,操作键盘时:   范例二:限制文本域数字的长度,当文字超过时,提交按钮被禁止使用. 代码如下: <!doctype html> <html lang = "zh-CN"> <head> <meta charset=&quo

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

对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Caption和ID属性分别为(红色,IDC_CHK_RED).(绿色,IDC_CHK_GREEN).(蓝色,IDC_CHK_BLUE) 修改2个Radio Box Caption和ID属性分别为(矩形,IDC_RD_RECT).(圆形,IDC_RD_ROUND) 注意:radio box 必须是连续的

javascript对行单击事件处理(委托事件)

我们有时候需要对一行数据做一个单击事件,即点击行中的任意位置都能触发该事件,我遇到的问题是在一个ul标签中的li标签中,当点击行中的任何一个位置时都让有反应进行不同的显示,我这里做了个demo,如果有更好的方法请分享一下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行单击事件</title> <style type="te

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

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

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

var eventUntil = { getEvent: function (event) {//获取事件 return event ? event : window.event }, addHandler: function (element, type, handler) {//事件监听 if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.atta

JavaScript学习笔记——6.事件处理

1.事件源 任何元素都可以作为事件源 2.事件 鼠标类 click //单击 dbclick //双击 contextmenu //右击菜单 mouseover //移入 mouseout //移出 mousedown //按下 mouseup //弹起 mousemove //移动 selected //选择内容 键盘类 keypress //键盘事件(只能是数字\字母) keyup //弹起(所有键都支持) keydown //按下(所有键都支持) 表单类 focus //获取焦点 blur

jQueryMobile的组件——复选框(checkbox)和单选钮(radio)

jQueryMobile框架为原生的html表单元素封装了新的表现形式,对触屏设备的操作进行了优化. data-theme="b"--指明元素的主题为黑色主题: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=de