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 ...
随机推荐
- Node.js躬行记（16）——活动配置化
一直想将一些常规活动抽象化,制作成可配置的.原先的计划是做成拖拽的,那种可视化搭建,运营也能自己搭建页面. 这是一个美好的愿景,但是现实不允许我花太多精力去制作这样一个系统.经过权衡后,先设计成一个可 ...
- php在windows上安装kafka扩展
一.下载kafka扩展包 链接:https://pecl.php.net/package/rdkafka 二.解压安装包 三.修改php.ini 复制librdkafka.dll 到php\php7. ...
- LINUX安装 RPM与YUM
1 Linux软件安装概述 安装程序的方式: 通用二进制格式:直接解压压缩文件,就可以使用.但一定要注意安装平台. 软件包管理器:如RPM. 软件包管理器的前端工具:如YUM. 源代码编译. 1 1. ...
- 2、mysql如何控制用户对数据库的访问
基础理解:通过对用户赋予某些权限就可以控制用户对数据库的访问 更深层次的理解:当mysql对用户赋予某些权限时,mysql底层是如何控制用户对数据库的访问 用户管理和权限管理 (基础理解) 用户管理 ...
- 软件工程homework-002
博客信息 沈阳航空航天大学计算机学院2020软件工程作业 作业要求 https://edu.cnblogs.com/campus/sau/Computer1701-1705/homework/1058 ...
- R-CNN小结
1.背景 物体检测(object detection)是计算机视觉非常重要的一个领域.RCNN作为该领域的开山鼻祖,在深度学习出现之前,传统方法始终无法处理好物体检测问题(会通过非常庞大的计算,来算出 ...
- Flink消费kafka
Flink消费Kafka https://blog.csdn.net/boling_cavalry/article/details/85549434 https://www.cnblogs.com/s ...
- Web调试工具之调试方法
转载于: http://toutiao.com/news/6242781162012410370/ 一.Firefox 插件之 Firebug, 火狐调试利器[初学必备] 为什么要第一个提到火狐呢?因 ...
- 关于DP动规
今天学了动规,简单记录一下自己理解了的:(要不俺就忘了) 首先,啥是DP??? 动态规划,其实就是组合子问题的解来解决整个问题的解,由于每个子问题他只判断一次,所以不会重复计算,那就很牛啊!!! 专业 ...
- Maven——setting.xml配置
<settings> <localRepository>C:\Users\gcl\.m2\repository</localRepository> <serv ...