此文主要针对 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. loadView、viewDidLoad及viewDidUnload的关系

      标题中所说的3个方法,都是UIViewController的方法,跟UIViewController的view属性的生命周期息息相关.接下来我会一一阐述它们的作用以及它们之间的联系. loadVi ...

  2. MS10048依旧是Windows 2003 x86 的杀器

    今天搞了个wow的游戏论坛,服务器环境是win03 x86+iis6.0+php+mysql. 提权的时候各种无奈,mysql无权限,而且没root,试了几个别的方法都不行,实在没办法的时候,用MS1 ...

  3. .NET Framework 4.5 的五大特性

    介绍 从.NET4.5发布到现在已经有一年多了.但问题是针对最近微软发布的版本信息中,大部分的.NET开发人员所讨论交流的只是其中的一两个特性.其他的特性仅仅停留在MSDN中或者沦为简介文档.例如:现 ...

  4. Scrum会议6(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  5. HRBUST 1326 循环找父节点神术

    题意 给出一个图 给出a点到每个点的路径 最后经过的除这个点本身以外的点 现在把a点改为b点 让求出按上面那种方式 把除b之外的点对应的点列出 ...算了我描述题意得能力好差...这个锅还是给出题的吧 ...

  6. Tesseract 对验证码的识别原理和实现步骤

    一. Steps: 学习图片库--->处理图片(初步处理)--->校正.学习图片 二. Tesseract: 1. 采集图片库(一般每个出现的字符出现20次左右识别效果比较好),根据图片特 ...

  7. tmux使用笔记

    tmux是指通过一个终端登录远程主机并运行后,在其中可以开启多个控制台的终端复用软件. 安装tmux需要先安装依赖包libevent,因为libevent安装在临时位置,所以在编译tmux过程中用到n ...

  8. ecshop session丢失问题

    ecshop session丢失问题 电子商务PHP 用ecshop搭建了一个电子商务的系统,本地测试一切正常.放到服务器上出现问题: 症状:      点着点着经常无故退出,感觉session被清空 ...

  9. RT-Thread的CPU使用率计算

    CPU 的使用率一般是我们比较关心的问题,在这里我们就用空闲线程的钩子函数去统计 CPU 的使用率,并通过串口打印出来.首先我们在初始化线程中设置好钩子函数,并在 LED 线程中给系统人为的加入很多“ ...

  10. Centos下安装Scrapy

    Scrapy是一个开源的机遇twisted框架的python的单机爬虫,该爬虫实际上包含大多数网页抓取的工具包,用于爬虫下载端以及抽取端. 安装环境: centos5.4 python2.7.3 安装 ...