JavaScript:单选钮的事件处理
单选按钮事件:
单选钮属于多选一的处理流程,但是单选钮由于也是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:单选钮的事件处理的更多相关文章
- FusionCharts JavaScript API - Events 全局事件处理
FusionCharts JavaScript API - Events 全局事件处理 Home > FusionCharts XT and JavaScript > API Refere ...
- 微信小程序 改变radio(单选钮)默认大小
/* 单选钮样式 */ radio { transform:scale(0.5); }
- JavaScript:文本域事件处理
文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...
- JavaScript:下拉列表框的事件处理
下拉列表框处理操作主要使用的是一个onchang的事件,此事件描述的是内容改变后行为. 范例:观察下拉列表框的事件处理 代码: <!doctype html> <html lang ...
- 006.MFC_对话框_复选框_单选钮
对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Ca ...
- javascript中的onmousewheel事件处理
滚轮事件在不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,FF也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
- Javascript为元素添加事件处理函数
document.getElementById("test").onclick = function(){ ... };
- 原生javascript跨浏览器常用事件处理
var eventUntil = { getEvent: function (event) {//获取事件 return event ? eve ...
- Python3 tkinter基础 Radiobutton 创建三个单选钮
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
随机推荐
- CSS HTML链接去掉小手与增添小手
style="cursor: hand" crosshair:精确定位“十”字形: text:文本“I”形: wait:等待,“沙漏”形: default:默认指针: help:帮 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- cmd下常用的一些命令
1.calc计算器 2.Mspaint画图 3.Netstat -anb查看端口 输入netstat -anb时可能会遇到下面问题 只要到搜索框输入cmd,然后到其快捷方式上右击以管理员身份运行即可 ...
- java 从args[]中赋值和程序直接赋值不一样?
System.out.println("对应的中文: " + decodeUnicode(args[0])); 赋值args[0] = “\u7b80\u4ecb” System. ...
- bin/bash 和 /bin/sh 的区别
今天在用ssh Secure shell 连接虚拟机中的Ubuntu编写程序时,想比对一下两个源代码有什么差别,但是在一个ssh 客户端下不断的切换很是费劲.于是想着在主机中再添加一个用户.我原本用s ...
- WBS练习
我们把这次团队程序设计分成了6个模块,让每一个同学都能参与其中,然后让每一个人选一个自己喜欢的模块,最后数据库设计这个部分就大家一起来做. Everybody's task allocation is ...
- could not build module 'uikit'
今天 新建一个SingleView-APP 无法运行程序,在 AppDelegate.h中 第一行代码处报错. #import <UIKit/UIKit.h> /Users/wjw/Des ...
- TCP移动端跟服务器数据交互
同一台笔记本下的客户端和服务端 TCPClient 客户端: // RootViewController.h#import <UIKit/UIKit.h>#import "As ...
- 使用Xcode GPU Frame Caputre教程
http://blog.manbolo.com/2012/11/20/using-xcode-opengl-es-frame-capture 这里是原文,因为它版本比较老和它demo的限制,所以也想写 ...
- GitHub超详细图文攻略
GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git 分类: 转载2014-03-25 21:10 10641人阅读 评论(2) 收藏 举报 GitHubbr ...