此文主要针对 web 页面中常见元素（例如：单选按钮、复选按钮）的 JavaScript 操作，进行简单的源码示例演示，敬请小主们参阅。若有不足之处，敬请大神指正，不胜感激！

话不多言了，直接上码：

 <html>

     <head>

         <meta charset='utf-8'>

         <title>JS-001-单选复选按钮操作</title>

         <link rel="stylesheet" type="text/css" href="global.css">

     </head>

     <body>

         <div id="single">

             <h4>单选项操作：</h4>

             <li>获取 radio 列表：document.getElementById('radio')</li>

             <li>点击 radio 列表第二项：document.getElementById('radio').children[3].click()</li>

             <li>查看 radio 列表第二项的选中状态：document.getElementById('radio').children[3].checked</li>

             <form id="radio">

                 <label>评级：</label>

                 <input type="radio" name="level" value="0"></input><label>特等</label>

                 <input type="radio" name="level" value="1"></input><label>优秀</label>

                 <input type="radio" name="level" value="2"></input><label>中等</label>

                 <input type="radio" name="level" value="3"></input><label>一般</label>

             </form>

         </div>

         <div id="multi">

             <h4>复选项操作：</h4>

             <li>获取 checkbox 列表：document.getElementById('checkbox')</li>

             <li>点击 checkbox 列表的第二个元素：document.getElementById('checkbox').children[1].click()</li>

             <li>查看 checkbox 的项的选中状态：document.getElementById('checkbox').children[0].checked</li>

             <form id="checkbox">

                 <label>选修：</label>

                 <input type="checkbox" name="level" value="0"><label>太极</label>

                 <input type="checkbox" name="level" value="1"><label>散打</label>

                 <input type="checkbox" name="level" value="2"><label>钢琴</label>

                 <input type="checkbox" name="level" value="3"><label>舞蹈</label>

                 <input type="checkbox" name="level" value="4"><label>二胡</label>

             </form>

         </div>

         <div>

             <br><br><br><br>

             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>

         </div>

     </body>

 </html>

将上述的源码保存至 html 文件中，用 Chrome 浏览器打开后，如下图所示：

执行相应的 js 脚本后，显示如下：

至此， JS-001-单选复选按钮操作 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

JS-001-单选复选按钮操作的更多相关文章

  1. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  2. jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr（checked）无效的解决

    关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...

  3. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...

  4. 单选复选按钮以及Toast学习笔记

    1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...

  5. [SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. 《手把手教你》系列技巧篇（三十三）-java+ selenium自动化测试-单选和多选按钮操作-上篇（详解教程）

    1.简介 在实际自动化测试过程中,我们同样也避免不了会遇到单选和多选的测试,特别是调查问卷或者是答题系统中会经常碰到.因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助 ...

  7. 《手把手教你》系列技巧篇（三十四）-java+ selenium自动化测试-单选和多选按钮操作-中篇（详解教程）

    1.简介 今天这一篇宏哥主要是讲解一下,如何使用list容器来遍历单选按钮.大致两部分内容:一部分是宏哥在本地弄的一个小demo,另一部分,宏哥是利用JQueryUI网站里的单选按钮进行实战. 2.d ...

  8. 《手把手教你》系列技巧篇（三十五）-java+ selenium自动化测试-单选和多选按钮操作-下篇（详解教程）

    1.简介 今天这一篇宏哥主要是讲解一下,如何使用list容器来遍历多选按钮.大致两部分内容:一部分是宏哥在本地弄的一个小demo,另一部分,宏哥是利用JQueryUI网站里的多选按钮进行实战. 2.d ...

  9. 《手把手教你》系列技巧篇（三十六）-java+ selenium自动化测试-单选和多选按钮操作-番外篇（详解教程）

    1.简介 前边几篇文章是宏哥自己在本地弄了一个单选和多选的demo,然后又找了网上相关联的例子给小伙伴或童鞋们演示了一下如何自动化测试,这一篇宏哥在网上找了一个问卷调查,给小伙伴或童鞋们来演示一下.上 ...

随机推荐

  1. Windows Phone7 快递查询

        (1)API去友商100里申请 布局代码: Exp.xaml <phone:PhoneApplicationPage x:Class="WindowsPhone_Express ...

  2. C#时间格式化(Datetime)用法详解

    Datetime.ToString(String, IFormatProvider) 参数format格式详细用法: 格式字符 关联属性/说明 d ShortDatePattern D LongDat ...

  3. oracle存储过程、声明变量、for循环|转|

    oracle存储过程.声明变量.for循环 1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out ty ...

  4. web app

    *********Modernizr作为开发HTML5必要的js工具************ Modernizr作为开发HTML5必要的js工具 *********字体大小设 rem********* ...

  5. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  6. android之打开网页

    首先改写strings.xml文件 代码如下: <resources> <string name="app_name">Intent应用</strin ...

  7. IIS 301 跳转

    IIS设置301重定向 IIS服务器下做301永久重定向设置方法. IIS6设置301重定向: 1.新建一个站点,对应目录如E:\wwwroot\301web.该目录下只需要1个文件,即index.h ...

  8. Eclipse问题提示

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

  9. Java类型相互转换byte[]类型，blob类型

    在我们的程序开发当中,经常会用到java.sql.Blob.byte[].InputStream之间的相互转换,但在JDK的API当中,又没有直接给我们提供可用的API,下面的程序片段主要就是实现它们 ...

  10. HITOJ 2662 Pieces Assignment（状压DP）

    Pieces Assignment My Tags   (Edit)   Source : zhouguyue   Time limit : 1 sec   Memory limit : 64 M S ...