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>

默认性别是男，截图如下：

选择男时，弹框截图如下：

选择女时，弹框截图如下

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！

本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5831623.html，如需转载请自行联系原作者

JavaScript：单选钮的事件处理相关推荐

Java学习day078 Swing用户界面组件（四：选择组件）（复选框、单选钮、边框、组合框、滑动条）
使用的教材是java核心技术卷1,我将跟着这本书的章节同时配合视频资源来进行学习基础java知识. day078 Swing用户界面组件(四:选择组件)(复选框.单选钮.边框.组合框.滑动条) 前 ...
JavaScript单选框选择操作
废话不多说来看原图: 当点击全选按钮的时候,项目复选框全高亮,反之字面意思反选则为当前勾选项目取消,无勾选项目则被勾选. 步骤一.写入html内容 input type属性值要改为&qu ...
六.javascript对象层次与事件处理
目录一.对象的引用二.事件驱动与事件处理 1.事件与处理代码关联 2.调用函数的事件 3.调用代码的事件 4.设置对象事件的方法 5.显式调用事件处理程序 6.事件处理程序的返回值 7.事件与th ...
JavaScript中的嵌套事件处理（在鼠标移动事件上）
Multiple event handling is the secret ingredient of dynamic WebPages seen now-a-days. 多重事件处理是当今动态网页的 ...
JavaScript高级程序设计 DOM事件处理读书笔记
1.IE 不支持事件的捕获. 2.事件捕获阶段不触发事件. 3.冒泡阶段触发事件. 4.html中处理事件 (1)<input type="button" οnclick ...
IE和FireFox的Javascript的事件和事件处理总结
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 使IE和FireFox事 ...
Javascript函数和事件
一.默认函数 JavaScript提供了一些默认的函数编码函数escape():将非字母.数字字符转换成ASCII码译码函数unescape():将ASCII码转换成字母.数字字符求值函数eva ...
JavaScript教程--从入门到精通
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的.介于Java与HTML之间.基于对象事件驱动的编程语言,正日益受到全球的关注.因它的开发环境简单,不需要Java ...
HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...

JavaScript：单选钮的事件处理

JavaScript：单选钮的事件处理相关推荐

最新文章

热门文章