此文主要针对 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. 【BZOJ】2929: [Poi1999]洞穴攀行（最大流）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2929 题意描述不清..搞得我wa了一发.. 应该是,有1和n的点的边容量都为1,其余随便... 然后 ...

  2. BZOJ4026: dC Loves Number Theory

    Description  dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭的水题资源.    给定一个长度为 n的正整数序列A,有q次询问,每次询问一段区间内所 ...

  3. [转]单例模式——C++实现自动释放单例类的实例

    [转]单例模式——C++实现自动释放单例类的实例 http://www.cnblogs.com/wxxweb/archive/2011/04/15/2017088.html http://blog.s ...

  4. ARC指南2 - ARC的开启和禁止

    要想将非ARC的代码转换为ARC的代码,大概有2种方式: 1.使用Xcode的自动转换工具 2.手动设置某些文件支持ARC 一.Xcode的自动转换工具 Xcode带了一个自动转换工具,可以将旧的源代 ...

  5. c++模版函数

    1.定义 可以使用class或者typename字段来申明 template <class T> template <class T1, class T2, ...class TN& ...

  6. 分支语句：if

    (1)分支语句if: if(判断条件) { 满足条件要执行的语句(若满足则alert输出(“”)) } else { 不满足条件时执行的语句 } (若if满足,else绝对不走,反之,走else) 例 ...

  7. Odoo　ir value　分析

    源代码位置:openerp/addons/base/ir/ir_values.py _columns = { 'name': fields.char('Name', required=True), ' ...

  8. 清橙 A1206 小Z的袜子（莫队算法）

    A1206. 小Z的袜子 时间限制:1.0s   内存限制:512.0MB   总提交次数:1357   AC次数:406   平均分:46.75   将本题分享到:        查看未格式化的试题 ...

  9. angJs使选中的li背景颜色不同

    <!doctype html><html><head><meta charset="UTF-8"><title>test ...

  10. Javascript 笔记与总结（2-14）事件

    常用事件: ● onclick 元素点击时 ● onfocus 元素获得焦点时 ● onblur 元素失去焦点时 ● onmouseover 鼠标经过时 ● onsubmit 表单提交时(<fo ...