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 ...
随机推荐
- laravel 7七牛云文件上传
1:composer下载七牛云 composer require itbdw/laravel-storage-qiniu 2:打开 config 文件夹下的 app.php 文件,在 provider ...
- think php 路由增删改查（搜索+关键字标红+缩略图）
路由 use think\Route; //展示添加表单 Route::get('create','user/user/create'); //表单提交数据 Route::post('save','u ...
- C#解析Markdown文档，实现替换图片链接操作
前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
- HamsterBear 构建可启动的镜像（更新中）
HamsterBear 构建可启动的镜像 Allwinner SoC 上电后会执行BootROM中的程序,会依次从SDIO,SPI等接口查询可引导的设备, SPI设备具有最低引导权,若无法查询到可引导 ...
- OpenCV基础_二
阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...
- 基于ECS搭建云上博客（云小宝码上送祝福，免费抽iphone13任务详解）
码上送祝福,带云小宝回家 做任务免费抽iphone13,还可得阿里云新春限量手办 日期:2021.12.27-2022.1.16 云小宝地址:https://developer.aliyun.com/ ...
- Windows安全加固手册
1 身份鉴别 1.1 密码安全策略 要求:操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期更换. 目的:设置有效的密码策略,防止攻击者 ...
- burp token爆破（DVWA high暴力破解）
一.选择Pitchfork模式.选择要爆破的参数 二.options设置 找到optiops(设置)把线程设为1 配置Grep=Extract,点添加 点击Refetch response 获取返回 ...
- 字节跳动社会招聘&内推-帮助你更快加入字节跳动
字节跳动社会招聘&内推「[内推码]:4J8CA3W」 内推时间:一直有效 招聘对象:根据招聘要求而定 社招投递链接: https://job.toutiao.com/s/de5teaA 应届生 ...
- 10年.NET老程序员推荐的7个开发类工具
做.NET软件工作已经10年了,从程序员做 到高级程序员,再到技术主管,技术总监.见证了Visual Studio .NET 2003,Visul Studio 2005, Visual Studio ...