此文主要针对 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. JavaScript基础知识总结

    正则表达式: 是一种专门用于操作字符串规则. 正则表达式: 通过一些符号来表达,简化对字符串的复杂操作. 弊端:阅读性较差 常见操作: 1.匹配 String matches(regex) 2.获取( ...

  2. PHP 常用到的一些小程序

    1.计算两个时间的相差几天 $startdate=strtotime(“2009-12-09”); $enddate=strtotime(“2009-12-05”); 上面的php时间日期函数strt ...

  3. Ubuntu SSH root user cannot login

    Open /etc/ssh/sshd_config and check if PermitRootLogin is set to yes. If not, then set it to yes and ...

  4. Windows下PHPUnit安装

    收藏的介绍地址 1.手动方式安装示例:http://blog.sina.com.cn/s/blog_5d3dc0110100ghlo.html2.通过Pear安装示例:blog.sina.com.cn ...

  5. replication set复制集

    replication set复制集  介绍 replicattion set 多台服务器维护相同的数据副本,提高服务器的可用性,总结下来有以下好处: 数据备份与恢复 读写分离 MongoDB 复制集 ...

  6. redis hash怎么用

    public static void testHsh() { System.out.println("==Hash=="); Jedis jedis = RedisUtil.get ...

  7. 10 位顶级 PHP 大师的开发原则

    10 位顶级 PHP 大师的开发原则 ruby_chen 发布于: 2013年03月28日 (61评) 分享到:    收藏 +139 #深圳# 6月10日 亚马逊AWSome Day云计算免费培训报 ...

  8. Away3D引擎学习笔记，持续更新

    (1). 准备工作,一些必须知道的东西 (创建时间:2014-06-05) A.必要的开发语言基础.至少要懂点ActionScript 3.0语法(ActionScript 3.0语法及API参考), ...

  9. ContentType Office

    Office对应ContentType 当从浏览器返回一个文件时,需要指定ContentType,以下是Office2007对应的值: "application/vnd.openxmlfor ...

  10. 实现LoadRunner多个场景的顺序执行（命令行）

    应用场景:假设有3个不同的测试场景,分别为并发登录.核心业务.可靠性测试,3个场景有先后执行顺序.由于白天测试机器另有用处,只能在晚上进行性能测试,这时我们的期望是能否把测试场景都设定好之后晚上自动运 ...