JavaScript操作checkbox复选框
运行效果：
源代码:
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>选项</title>
6 </head>
7 <body>
8 <input id="travel" type="checkbox" value="旅游"/><label for="travel">旅游</label><br/>
9 <input id="music" type="checkbox" value="音乐"/><label for="music">音乐</label><br/>
10 <input id="sports" type="checkbox" value="运动"/><label for="sports">运动</label><br/>
11 选中项的信息为：<p id="selectedContent"></p>
12 <button type="button" onclick="selectAll()">全选</button>
13 <button type="button" onclick="unSelectAll()">取消全选</button>
14 <button type="button" onclick="showInfo()">显示</button>
15
16 <script type="text/javascript">
17 var checkboxs = document.getElementsByTagName('input');
18
19 function selectAll() {//CheckBox全选
20 for (var i = 0; i < checkboxs.length; i++) {
21 checkboxs[i].checked = true;
22 }
23 }
24
25 function unSelectAll() {//CheckBox取消全选
26 for (var i = 0; i < checkboxs.length; i++) {
27 checkboxs[i].checked = false;
28 }
29 }
30
31 function showInfo() {//显示选中的value值
32 document.getElementById("selectedContent").innerText = null;
33 for (var i = 0; i < checkboxs.length; i++) {
34 if (checkboxs[i].checked === true) {
35 document.getElementById("selectedContent").innerText += checkboxs[i].value + "，";
36 }
37 }
38 }
39 </script>
40 </body>
41 </html>
JavaScript操作checkbox复选框的更多相关文章
- js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- checkbox复选框的一些深入研究与理解
一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌.我是不是应该着眼于眼前的东西,好好的静下心来,超过一般人的沉静与沉浸,研究最基本的东西呢?这番思考,让我找到了一 ...
- 【转载】checkbox复选框的一些深入研究与理解
转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌. ...
- js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- 如何让checkbox复选框只能单选
function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...
- checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- 通过编写串口助手工具学习MFC过程——（五）添加CheckBox复选框
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
随机推荐
- docker学习(三) - docker理解及命令
Docker 包括三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) 镜像 Docker 镜像就是一个只读的模板. 例如:一个镜像可以包含一个完整的 ubunt ...
- rsyn实现服务器源码同步
近期技术总监提出,要建立预生产环境,代码实现灰度发布.需要多台服务器源码保持一致. 实施步骤 1.安装rsyn服务端并添加环境变量. 2.安装客户端并配置环境变量. 3.更改配置文件并开放防火墙端口. ...
- 解决 MySQL 的 Table is marked as crashed and should be repaired 问题
解决方法: 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r ../data/mysql/user.MYI 然后myisamchk 工具会帮助 ...
- 原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK
上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...
- TypeScript 初体验
TypeScript学习 1 安装环境 a 首先安装node.js node.js 用来将ts文件解析成js文件 供浏览器使用: 解析ts文件 tsc filename.ts b. 使用npm (no ...
- python 自定义加密与解密
import tkinter import webbrowser import re #本程序是一个中文字符和中文检测工具 #中文字符自己添加,我只添加了一点 #输入字符串,点击检查文本即可判断有没有 ...
- Mybatis配置错误：java.lang.ExceptionInInitializerError
情况一:配置文件,无法被导出或者生效 修改前: 修改后: 究其原因,这是由于Maven的约定大于配置,导致我们写的配置文件,无法被导出或者生效的问题,解决方案: 在pom.xml文件中配置导出非res ...
- 一图学Python
网上有这样一张图片,信息量很大,通常会被配上标题"一张图让你学会Python": 这张图流传甚广,但我没有找到明确的出处,图片上附带了 UliPad 的作者 Limodou 的信息 ...
- 面试问题之C++语言：类模板声明与定义为何不能分开
C++中每个对象所占用的空间大小,是在编译的时候就确定的,在模板类没有真正的被使用之前,编译器是无法知道,模板类中使用模板类型的对象的所占用的空间的大小的.只有模板被真正使用的时候,编译器才知道,模板 ...
- 为什么说 Mybatis 是半自动 ORM 映射工具？它与全自动 的区别在哪里？
Hibernate 属于全自动 ORM 映射工具,使用 Hibernate 查询关联对象或者关联 集合对象时,可以根据对象关系模型直接获取,所以它是全自动的.而 Mybatis 在查询关联对象或关联集 ...