Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >确保至少选中一个复选框

确保至少选中一个复选框
EN

Stack Overflow用户
提问于 2012-08-03 00:24:41
回答 8查看 116.9K关注 0票数 30

我有一个具有多个复选框的表单,我希望使用JavaScript确保至少选中一个复选框。这就是我现在所拥有的,但无论选择什么,都会弹出一个警告。

JS (错误)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function valthis(){
 if (document.FC.c1.checked) {
   alert ("thank you for checking a checkbox")
  } else  {
   alert ("please check a checkbox")
  }
}

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1 
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br> 
<input type = "checkbox" name = "c1" value = "c4"/> C4 
<br>
</form>
<br>
<br>

<input type = "button" value = "Edit and Report" onClick = "valthisform();">

所以我最终在JS中做的是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function valthisform(){
 var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked

 if (chkd == true){

 } else {
    alert ("please check a checkbox")
 }

}

我决定去掉“谢谢”这一部分,以适应剩下的任务。非常感谢,每个人的建议真的很有帮助。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-08-03 00:40:54

如果您打算引用两个复选框(如document.FC.c1 ),则应避免使用两个同名的复选框。如果你有多个名为c1的复选框,浏览器怎么知道你指的是哪一个呢?

下面是一个非jQuery解决方案,用于检查是否选中了页面上的任何复选框。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

您需要Array.prototype.slice.call部件将document.querySelectorAll返回的NodeList转换为可对其调用some的数组。

票数 36
EN

Stack Overflow用户

发布于 2020-01-01 21:00:20

我会选择一种更实用的方法。自从ES6以来,我们已经有了这么好的工具来解决我们的问题,所以为什么不使用它们呢?让我们首先给复选框一个类,这样我们就可以很好地将它们四舍五入。我更喜欢使用类而不是inputtype="checkbox“,因为现在的解决方案更加通用,并且当您的文档中有更多组的checkbox时也可以使用。

HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
    <input type="checkbox" class="checkbox" value=ck2 /> ck2<br />

JavaScript

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function atLeastOneCheckboxIsChecked(){
    const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
    return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}

调用时,如果未选中任何复选框,则函数将返回false;如果一个复选框或两个复选框都选中,则返回true。

它的工作原理如下,reducer函数有两个参数,累加器(acc)和当前值(curr)。对于数组上的每次迭代,如果累加器或当前值为true,则缩减程序将返回true。上一次迭代的返回值是当前迭代的累加器,因此,如果它为真,它将一直保持为真直到结束。

票数 5
EN

Stack Overflow用户

发布于 2012-08-03 01:19:34

Check this.

您不能通过表单输入的名称访问表单输入。请改用document.getElements方法。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11787665

复制
相关文章
mongodb导入json_json格式是什么
刚开始接触mongodb,以下介绍使用mongoVUE来导入和导出json格式的数据
全栈程序员站长
2022/09/25
1.3K0
mongodb导入json_json格式是什么
控制MongoDB中的集合分布
分片标记(Shard tagging)是MongoDB 2.2.0版中的一项新功能。通过对集合进行标记使其被强制写入到本地数据中心,也可以用来将某个集合固定到一个分片或一系列分片中。
Sepmer Fi
2018/01/10
2K0
控制MongoDB中的集合分布
mongodb 集合_mongodb原理
默认情况下,对比事务安全,MongoDB更关注高的插入速度。如果你需要加载大量低价值的业务数据,那么MongoDB将很适合你的用例。但是必须避免在要求高事务安全的情景下使用MongoDB,比如一个1000万美元的交易。
全栈程序员站长
2022/11/15
2K0
mongodb 集合_mongodb原理
JAVA中json转Map,jsonArray转List集合,List集合转json
在写代码时,经常会遇到各转类型之间互相转换,比如json转换为Map,jsonArray转List集合,List集合转json,现在整理一个工具类,方便日后查阅。
全栈程序员站长
2022/09/10
3.7K0
JAVA中json转Map,jsonArray转List集合,List集合转json
MongoDB 中的集合和元数据
集合就是 MongoDB 文档组,类似于 RDBMS (关系数据库管理系统:Relational Database Management System)中的表格。
RiemannHypothesis
2022/11/05
1.9K0
MongoDB固定集合
一般情况下我们创建的集合是没有大小的,可以一直往里边添加文档,这种集合可以动态增长,MongoDB中还有一种集合叫做固定集合,这种集合的大小是固定的,我可以在创建的时候设置该集合中文档的数目,假设为100条,当集合中的文档数目达到100条时,如果再向集合中插入文档,则只会保留最新的100个文档,之前的文档则会被删除。一般像日志信息我们就可以使用固定集合,其他一些需要定期删除的数据也可以使用固定集合,本文我们就来看看这个固定集合的使用。 ---- 创建 固定集合的创建方式也比较简单,如下: db.create
江南一点雨
2018/04/02
1.1K0
MongoDB 系统集合
MongoDB将系统信息存储在使用<database>.system.*命名空间的集合中,这些集合是MongoDB保留供内部使用的。用户请不要创建以system开头的集合。
MongoDB中文社区
2021/09/24
6020
MongoDB 系统集合
MongoDB删除集合
作者: 初生不惑 Java技术QQ群:227270512 / Linux QQ群:479429477
拓荒者
2019/09/12
1.2K0
MongoDB 数组在mongodb 中存在的意义
在MOGNODB 的文档设计和存储中,存在两个部分 1 嵌套 2 数组,所以如果想设计好一个MONGODB 在理解业务,读写比例,查询方式后,就需要介入到更深层次的理解嵌套的查询方式,嵌套多层后的性能问题, 数组其实比嵌套带来更多的问题,所以今天我们的从数组开始。
AustinDatabases
2022/04/05
4.2K0
MongoDB  数组在mongodb 中存在的意义
在Docker中安装MongoDB
1.版本选取 访问mongodb的镜像仓库地址:https://hub.docker.com/_/mongo?tab=tags&page=1 这里选取最新版本进行安装,如果想安装其他的可用版本,可以使
Peyshine
2020/05/19
7.5K0
在Docker中安装MongoDB
MongoDB(三)—-MongoDB的集合操作
MongoDB使用db.createCollection()函数来创建集合。 语法格式:db.createCollection(name, options) name: 要创建的集合名称。 options: 可选参数, 指定有关内存大小及索引的选项。
全栈程序员站长
2021/04/07
9500
Linux中mongodb安装和导出为json
采用官方工具导出mongo数据为json格式 文档:https://docs.mongodb.com/manual/reference/program/mongoexport/ 可以远程导出,只要有host:port即可。 首先需要安装tools: 在redhat中: 文档:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 1、编写repo文件 Create a /etc/yum.repos.d/mongodb-org
Ryan-Miao
2018/03/13
1.9K0
MongoDB导入Shapefile数据
两种解决方案: 一、将整个shapefile转为GeoJSON然后直接导入mongoDB数据库中 首先,将shapefile数据转为WGS84地理坐标,然后使用GDAL的命令行工具ogr2ogr进行格式的转换,转换命令如下: ogr2ogr -f geoJSON continents.json continents.shp 删除生成JSON文件的前两行{ "type": "FeatureCollection",和最后一行}。 最后,使用mongodb的mongoimport工具进行导入: mongoimport --db world --collection continents < continents.json 这样子整个shapefile文件在mongodb中是以一个document存在的。
卡尔曼和玻尔兹曼谁曼
2019/01/22
1.9K0
mongodb导出和导入
2018-08-12 发表在 服务器 1543 + 导出表: bin/mongoexport -h 10.28.65.152 -d health_shaanxi_pro -c wt.health.item -o health.json --type json 导入表: bin/mongoimport -d mongotest -c users --file /home/mongodump/articles.json --type json 数据库备份: mongodump -h dbho
小贝壳
2020/03/05
1.9K0
mongodb导入导出数据
mongodb数据备份与恢复 备份 mongodump -h <dbhost> -d <dbname> -o <dbdirectory> // 示例 mongodump -h localhost -d test -o /home/data -h 服务器地址 如: 127.0.0.1 也可以指定端口号: 127.0.0.1:27017 -d 需要备份的数据库名 如: test -o 存放的目录 如: /home/data mongodb会自动在/home/data下创建一个test目录,里面存放备份数据 恢复
零式的天空
2022/03/21
1.9K0
【Json】json在SpringBoot中的格式转换
fastjson深入理解 fastJson对于json格式字符串的解析主要用到了一下三个类:
瑞新
2020/12/07
6.4K0
【Json】json在SpringBoot中的格式转换
MongoDB 3.0 导入命令
./mongoimport -h 192.168.77.129 --db test --collection restaurants --drop --file /usr/local/mongodb-linux-x86_64-3.0.6/DW_LABEL_DATAS_1_0.csv
用户3003813
2018/09/06
9940
MongoDB 3.0 导入命令
在MongoDB中模拟Auto Increment
MySQL用户多半都有Auto Increment情结,不过MongoDB缺省并没有实现,所以需要模拟一下,编程语言以PHP为例,代码大致如下所示:
LA0WAN9
2021/12/14
9540
mongodb撤销集合分片
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
拓荒者
2019/09/12
1.8K0
44、MongoDB集合操作
(1)大家首先要知道,MongoDB中集合的概念也就是我们一般在mysql中所说的表,如何创建一个集合呢?如下:
Ewall
2018/12/06
4960
44、MongoDB集合操作

相似问题

iOS Swift检测键盘事件

30

如何检测国际键盘隐藏事件?iOS

10

如何在iPhone上检测硬件键盘上的键盘事件(iOS)

31

如何使用Swift在iOS中检测多行键盘粘贴事件?

10

iOS:如何检测外部键盘上的修改键状态更改?

128
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文