在for循环中生成复选框并将响应存储在列表中
，可以通过以下步骤实现：
- 首先，创建一个空列表来存储复选框的响应结果。
- 在for循环中，根据需要的数量迭代生成复选框。可以使用HTML和JavaScript来实现。
- 在每次迭代中，创建一个新的复选框元素，并设置其属性和标签文本。可以使用HTML的input元素来创建复选框。
- 将每个复选框的值和状态（选中或未选中）存储在列表中。可以使用JavaScript的事件监听器来捕获复选框的状态变化。
- 最后，可以使用列表中的响应结果进行后续处理，例如将其发送到服务器或进行其他操作。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>生成复选框并存储响应</title>
</head>
<body>
<form id="checkboxForm">
<div id="checkboxContainer"></div>
<button type="button" onclick="getResponses()">获取响应</button>
</form>
<script>
// 创建空列表来存储响应结果
var responses = [];
// 获取复选框容器和表单元素
var checkboxContainer = document.getElementById("checkboxContainer");
var checkboxForm = document.getElementById("checkboxForm");
// 定义需要生成的复选框数量
var checkboxCount = 5;
// 生成复选框并将响应存储在列表中
for (var i = 0; i < checkboxCount; i++) {
// 创建新的复选框元素
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox" + i;
checkbox.value = "选项" + i;
// 创建标签元素
var label = document.createElement("label");
label.htmlFor = "checkbox" + i;
label.appendChild(document.createTextNode("选项" + i));
// 将复选框和标签添加到容器中
checkboxContainer.appendChild(checkbox);
checkboxContainer.appendChild(label);
// 监听复选框状态变化事件
checkbox.addEventListener("change", function() {
if (this.checked) {
// 复选框被选中时，将响应存储在列表中
responses.push(this.value);
} else {
// 复选框被取消选中时，从列表中移除响应
var index = responses.indexOf(this.value);
if (index > -1) {
responses.splice(index, 1);
}
}
});
}
// 获取响应的函数
function getResponses() {
console.log(responses);
// 可以在这里进行后续处理，例如发送到服务器
}
</script>
</body>
</html>在上述示例代码中，我们使用了HTML和JavaScript来生成复选框并将响应存储在列表中。通过点击"获取响应"按钮，可以在浏览器的控制台中查看存储的响应结果。你可以根据实际需求进行修改和扩展。
相关·内容
1回答
使用JavaScript创建多个复选框
javascript、jquery、html、twitter-bootstrap、checkbox
我想用JavaScript创建多个复选框。我尝试了以下几点：
var response= data;
var container = document.createElement('div');
var checkboxContainer = document.createElement('div');
checkboxContainer.setAttribute('class', 'checkbox');
var label;
var checkBo
浏览 5提问于2014-04-07得票数 2
回答已采纳
4回答
使用splice()根据索引从数组中移除值
javascript、jquery
我有4个复选框。我在检查时将它们的值添加到数组中。它看起来像这样。 以下是我拥有的四个复选框。 <input type="checkbox" value="degree">
<input type="checkbox" value="pgd">
<input type="checkbox" value="hnd">
<input type="checkbox" value="advdip"> 一旦我检查了所有四个数
浏览 32提问于2020-04-25得票数 0
回答已采纳
1回答
有没有办法将输入字符串中的锚定标记传递给标签
angular、input、angular7
我为checkbox定义了一个自定义类，其中标签和输入与类一起定义。 我在另一个类中使用该组件，我需要传递一个包含链接的标签，例如:请接受要继续的.So，是否可以传递上面包含链接的字符串的标签？ customCheckbox.component.ts <div class="form-group" [formGroup]="checkboxForm">
<label class="checkboxContainer">
{{ label }} <input id="{{ id }}" t
浏览 24提问于2019-06-01得票数 0
1回答
HTML由TagBuilders生成的单元测试ASP.NET
asp.net-mvc、unit-testing、tagbuilder
我有通过生成超文本标记语言的代码，如何测试是否生成正确的超文本标记语言？我的TagBuilder不是只有一个标签那么简单，它还包含其他标签。所以我有一个函数，它返回TagBuilder对象，其中包含以下超文本标记语言
<div>
<input type="checkbox" name=".." /> <label for=".." />
<input type="checkbox" name=".." /> <label for="..&#
浏览 1提问于2011-08-19得票数 3
3回答
在本例中添加表单验证
javascript
我有3组单选按钮和1组复选框。如何检查在每组单选按钮中是否选中了某个单选按钮，以及是否至少选中了一个复选框？如果没有，可能会弹出一个警告窗口。因此:需要从所有三个组和一个复选框中选择一个单选按钮(所有四个都是必选的)。我对此一无所知。谢谢
<html>
<head>
<script type="text/javascript">
function DisplayFormValues()
{
var str = '';
var elem = document.getElementById('frmMain&#
浏览 1提问于2010-10-26得票数 0
回答已采纳
2回答
带有突出显示复选框的CSS选择器问题
html、css、css-selectors
当我将标签放在复选框后时，这个CSS选择器可以工作。
input[type=checkbox]:checked + label {
color: red;
}
<input type="checkbox"><label>Checkbox1</label>
但是我也想在点击标签的时候选中复选框。
下面是用于更新HTML的CSS。
label > input[type=checkbox]:checked {
color: red;
}
浏览 1提问于2016-09-25得票数 4
回答已采纳
1回答
MVC4 Jquery验证复选框是否至少选中一个？
javascript、jquery、asp.net-mvc-4、checkbox、requiredfieldvalidator
我正在实现一个复选框问题，让用户选择。但是，如果管理员将问题设置为true，则复选框必须至少选择1才能提交，否则消息将提示用户选择。尝试了jquery，但是当单击按钮时，什么都不会发生。
我犯过什么错误吗？
我的观点：
@model List<IFXSurveyTool.Models.AnswerQuestionViewModel>
<script>
var messageContainer = $('.errormessage');
$('#save').click(
浏览 4提问于2015-07-28得票数 1
回答已采纳
2回答
如何在Angular 9中使用FormArray加载时自动选中第一个复选框
angular、angular-reactive-forms、angular2-forms、angular9
大家好，我有两个我使用FormArray的复选框，我想在运行Aplication..Please时自动选中/选中第一个复选框，我该怎么做？请参阅下面的代码 Checkboxform: FormGroup;
checkboxValue: FormArray;
constructor(private formBuilder: FormBuilder) {
this.Checkboxform = this.formBuilder.group({
checkArray:this.formBuilder.array([])
})
}
onCheckboxCh
浏览 57提问于2020-11-04得票数 0
1回答
动态填充复选框并在react中维护复选框的状态
javascript、reactjs
通过fetch调用api服务，我们动态地填充了复选框项。根据集合，我们将显示带有选中状态的复选框。
如果选中/取消复选框，如何为动态填充的复选框项实现handlechange事件。
我想得到当前的复选框状态。我怎样才能拿到？
在checkboxcontainer.tsx中
data.map(item => (
<label key={item.projectId} className="checkBoxcontainer">
<CheckBox name={item.projectName}
浏览 0提问于2018-12-11得票数 0
2回答
我有多个复选框，一个页面上有标签。对于选中的每个复选框，我希望将标签附加到div (逗号分隔)。当其中一个复选框未选中时，我希望从div中删除该特定标签。复选框的数量可以是可变的。
到目前为止我所拥有的是：
$("input:checkbox").click(function() {
var selected = $("label[for='" + this.id + "']").text() + ',';
$("p").html(selected);
});
浏览 2提问于2016-09-14得票数 1
回答已采纳
1回答
在React中console.log复选框值的数组
javascript、arrays、reactjs、checkbox
我想要对选中的复选框的数组执行console.log操作。就像选中复选框1、2和5一样，我希望它在控制台中显示为每个复选框的值的数组。我可以让最后一个选中的值显示在控制台中，但我不能让所有复选框都选中的数组来显示。他们只是分开出现。 import { CheckboxData } from "../../../Data/SurveyData";
class CheckboxForm extends Component {
constructor(props) {
super(props);
this.state = { value: [] };
浏览 12提问于2020-08-22得票数 1
回答已采纳
2回答
如何使用jquery查找下一个td元素类型
javascript、jquery、html
<tr>
<td class="value" style="width:40%;">
<label class="label">Gender value</label>
</td>
<td class="value" style="width:40%;">
<input id="checkbox" type="checkbox" tabindex="0" name="chkCusto
浏览 5提问于2014-03-31得票数 0
回答已采纳
2回答
JQuery:使用两个数组创建链接列表
jquery、arrays、html、each
因此，我试图编写一些jQuery，从选中的复选框中提取值和自定义数据(html5)，以创建链接列表。链接文本将来自值，而链接源将来自自定义数据。我已经为链接文本和url创建了数组，但是当我试图为所选选项创建链接列表时，url显示为一个字母。对我做错了什么有什么想法吗？我在这里创建了一个JSFiddle：
HTML：
<form method="post" id="resources">
<label><input type="checkbox" data-url="http://option1.com
浏览 1提问于2014-10-23得票数 4
回答已采纳
2回答
Checkboxes和JQuery在Opera和IE中的奇怪行为
javascript、jquery、html、events、checkbox
示例代码使用JQuery来防止用户取消选中last checked复选框。它在Firefox和Chrome中的功能与预期一致，但在Opera或IE中则不然。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#checkboxContainer label {
float: left;
clear: right;
}
#checkboxContainer input {
浏览 0提问于2012-01-07得票数 0
回答已采纳
1回答
HTML标签不显示(Dojo 1.8)
checkbox、dojo、label
我正在使用Dojo 1.8动态创建一组复选框。创建checkbox之后，我还设置了checkbox的标签，但该标签在站点上不可见，尽管我在Firebug中查看HTML时可以看到它。你知道我做错了什么吗？在这一点上，我已经看了太多的代码，不知道它是什么。谢谢!
var checkboxContainer = dom.byId('divLayers');
var chkboxId = 'chk' + layer.id;
var chkbox = new dijit.form.CheckBox({
id: chkboxId,
checked: laye
浏览 0提问于2013-01-19得票数 3
回答已采纳
2回答
听复选框被选中/未选中的正确方法是什么？
javascript、jquery、checkbox
我使用这段代码来检查是否选中了复选框，如果选中了，则在地图上显示子菜单和特定层：
$('input').on('change', function () {
var x = $( 'input:checked' ).val(); // x gets the value attribute of changed checkbox
if ($('input').is(':checked')) {
sublayers.getSubLayer(x).show(); // shows specified la
浏览 1提问于2015-12-21得票数 1
回答已采纳
3回答
选中复选框上的可更新
javascript、checkbox
我在TabContainer控件中有一个具有复选框项的网格视图。我正在触发javascript，以显示选中的复选框数量的警报。
现在我想用选中复选框的计数更新屏幕上的标签文本，而不是显示警告，但我不知道如何引用标签。
请参阅下面的代码。如果你能给我一个类似的职位，我将不胜感激。
<asp:Content ID="Content4" ContentPlaceHolderID="MasterContent" runat="server">
<script type="text/javascript">
浏览 2提问于2014-12-05得票数 0
回答已采纳
1回答
选中“填写内部详细信息”复选框
javascript、php、html、checkbox
当我选中任何复选框时，它都会给出一个错误消息，用于所有细节--不管在复选框中是什么。在我的代码中，如果我选择了第一个复选框，那么它会显示一个文本框和一个下拉列表，希望进行验证来填充textbox和下拉列表值，直到它不选中其他选项&与所有复选框一样。现在，我只为第一个复选框取文本框和下拉列表，但对每个复选框都是这样。简单地说，除非我不填充textbox值和下拉值，否则它不允许检查next选项。我不知道该怎么办。有人能告诉我怎么做吗。
<script>
function validate()
{
document.getElementById("error
浏览 3提问于2015-03-02得票数 1
回答已采纳
1回答
使用DIVs包装时，选中基于复选框的标签样式。
css、css-selectors
下面是我的HTML设置：
<div class="form-item">
<input type="checkbox" id="my-check">
</div>
<div class="form-item">
<label for="my-check">I'm a checkbox</label>
</div>
在所有CSS世界中，是否有任何方法可以根据是否选中复选框来对该标签进行样式设置？(不更改当前的H
浏览 1提问于2015-09-26得票数 1
回答已采纳
1回答
段中的Ionic2复选框问题
angular、typescript、checkbox、ionic-framework、ionic2
我有一个像这样的屏幕。
在这里，我选择了第一部分(男性部分)中的复选框，并转到第二部分(女性部分)，从女性部分中选择其他复选框。但是当我回到第一段时，我之前的所有复选框都被取消选中，尽管我可以在所选的表单控件中看到值。我获取了一个表单数组&每次选中时都会推送一个新的带有值的表单控件，如果未选中则将其移除。
为了更好地理解，我添加了代码。
constructor(public fb : FormBuilder){
this.checkboxForm = this.fb.group({
categories : this.fb.array([],Custom
浏览 1提问于2017-08-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
