此文主要针对 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. topcoder SRM 593 DIV2 WolfDelaymaster

    #include <iostream> #include <string> #include <algorithm> using namespace std; cl ...

  2. String, StringBuffer, StringBuilder(转载)

    http://blog.csdn.net/rmn190/article/details/1492013 String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilde ...

  3. [Unity2D]鼠标（或触摸）输入处理

    在游戏的编程之中,基本上都需要依赖鼠标的输出,特别是在手机游戏上,绝大部分都需要通过手指触摸来控制游戏.如果要实现一个精灵,当手指点击精灵的会触发相关的操作,或者我们使用一张图片来作为按钮,点击的时候 ...

  4. [Unity2D]Box Collider 2D盒子碰撞器

    盒子碰撞器(BoxCollider2D)是Unity2D中常用的碰撞器,所有为碰撞器,顾名思义,就是用于检测物体之间的碰撞情况的,Unity2D里面除了BoxCollider2D碰撞器之外还集成Box ...

  5. 【BZOJ】2875: [Noi2012]随机数生成器（矩阵乘法+快速乘）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2875 矩阵的话很容易看出来.....我就不写了.太水了. 然后乘法longlong会溢出...那么我 ...

  6. 【wikioi】1690 开关灯（线段树）

    http://wikioi.com/problem/1690/ 这题可不能算是水题了.. 在线段树中,我只想到了lazy改变,但是没想到lazy变后size怎么变,我的策略变成了lazy为0时size ...

  7. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

  8. freemarker 图片输出、多张图片输出（图片重复原因及解决）

    单张图片显示: 先写好word格式的文档,在其中插入一张图片,然后重命名为ftl,再用编辑器打开,把图片那一段base64信息用freemarker表达式替换掉. 之后把图片的信息输出到模板即可. 多 ...

  9. 【C语言】07-基本语句和运算

    一.基本语句 C语言的基本语句跟Java中的差不多,所以,这里只是简单地提一下 循环语句(do while.while.for) 条件语句(if .if-else.switch) goto语句 二.基 ...

  10. Html - 404页面

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...