如何在Angular (10+)中获取所有复选框值？
在Angular (10+)中获取所有复选框的值，可以通过以下步骤实现：
- 在组件的模板中，使用ngModel绑定每个复选框的值到组件中的一个数组属性。例如，使用ngModel绑定到checkboxValues数组：
<input type="checkbox" [(ngModel)]="checkboxValues" value="value1">
<input type="checkbox" [(ngModel)]="checkboxValues" value="value2">
<input type="checkbox" [(ngModel)]="checkboxValues" value="value3">- 在组件的类中，定义一个名为checkboxValues的数组属性来保存复选框的值：
checkboxValues: string[] = [];- 当复选框的值发生改变时，checkboxValues数组会自动更新。你可以在组件中的任何地方访问checkboxValues数组来获取所有被选中的复选框的值。
以下是一个完整的示例代码：
<!-- app.component.html -->
<input type="checkbox" [(ngModel)]="checkboxValues" value="value1">
<input type="checkbox" [(ngModel)]="checkboxValues" value="value2">
<input type="checkbox" [(ngModel)]="checkboxValues" value="value3">
<button (click)="getSelectedCheckboxValues()">Get Selected Values</button>// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
checkboxValues: string[] = [];
getSelectedCheckboxValues() {
console.log(this.checkboxValues);
}
}当点击"Get Selected Values"按钮时，会在控制台输出所有被选中的复选框的值。
这种方式可以用于获取任意数量的复选框的值，并且可以轻松扩展到更复杂的场景中。您可以根据需要在组件中处理获取到的复选框值。
对于腾讯云相关产品和产品介绍链接地址，可以根据具体需求选择适合的云服务产品进行后端开发、部署和托管。例如，腾讯云的云服务器（CVM）和云函数（SCF）可以提供强大的计算能力，云数据库（TencentDB）可以用于数据存储和管理，云存储（COS）可以用于多媒体文件的存储和处理，云安全中心（SSM）可以提供网络安全防护等。
请注意，以上只是一些示例产品，具体的选择和推荐需要根据实际需求和场景进行。您可以访问腾讯云官方网站以获得更详细的产品介绍和文档链接。
完整答案如上所述，没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。
相关·内容
我已经在Angular scheduler中应用了自定义表单。我已经在该表单上使用了复选框。
屏幕截图： I used this code to render复选框：
<tr *ngFor="let a of packageList">
<td colspan="2" >
<ejs-checkbox id="{{a.Value}}" name="{{a.Text}}" value="{{data[a.Text]}}" label="{{a.Text}}
浏览 0提问于2019-11-08得票数 0
1回答
在角4+中有一个反应性形式，其中有多个check boxes，如下所示：
现在，用户可以选择尽可能多的复选框。因此，此表单的输出是选中的复选框的数组，如下所示：
[
"I have a bike",
"I have a nothing",
"I have a test"
]
我不知道如何在reactive forms中处理这个问题。请注意，我使用的是以下内容：
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
我想要的：
在将
浏览 3提问于2018-01-06得票数 0
我有一个复选框列表(在100+周围)，并希望遍历以获得“label”值，而不必执行以下100+项。
<p>Colors: <?php the_field('colors'); ?></p>
复选框字段未设置为中继器或组(请参见屏幕截图)。
以下代码适用于ACF版本4.4.12，但不适用于ACF Pro 5.6.10。
<?php
$groupID = '2893'; // Package Inclusions
$package_inclusions1 = apply_filters('acf/field_
浏览 49提问于2018-07-16得票数 0
在我目前的项目中，我们几乎在每个页面中都使用了jqGrid。我们使用了网格的丰富功能集，包括复杂的网格内联行编辑、下拉列表、复选框和其他控件、排序、列过滤等。
现在我们希望将我们的项目转换为angular 2，但我们的主要问题是替换jqGrid的丰富功能集。在开始之前，我需要做一些POC，如果所有的功能都可以在基于角度2的网格中完成。
如何在Angular 2+中使用jqGrid？
浏览 4提问于2017-04-18得票数 3
3回答
复选框在angular中禁用
、、、、
我有一张桌子。我有一个列，其中只有复选框作为值。当我启用一个复选框时，当我启用一个复选框时，我显示了一条消息“嘿”(消息出现)，但当我启用另一个复选框时，消息disappears.The message最初会在一个复选框被启用时出现。我已经将所有值放入一个表中，当我启用一个复选框时，我会显示一条“嘿”消息(该消息会出现)。我需要的是，直到所有的复选框被禁用，消息应该在那里，甚至当一个或多个复选框在那里，消息应该在那里。我正在用angular编写我的代码。 这是我的stackblitz链接https://stackblitz.com/edit/angular-oswf2h?file=src%2
浏览 48提问于2020-11-10得票数 2
回答已采纳
我在telerik组合控件中有一个复选框。如果用户点击复选框列表中的“全部”选项，那么我想选择所有的复选框。复选框值。我的示例代码如下。
<telerik:RadComboBox Name="rcbDays" Grid.Row="1" Grid.Column="1" Width="200" HorizontalAlignment="Left" ItemsSource="{Binding MonthDaysList}" VerticalAlignment="Center"
浏览 0提问于2012-02-23得票数 0
我需要一个帮助。当使用angular.js选中复选框时，我需要获取行数据列表。我在下面解释我的代码。
<tbody id="detailsstockid">
<tr ng-repeat="p in viewIncompleteData">
<td>
{{$index+1}}<input type="checkbox" ng-model="checkboxModel.value1">
</td>
<td>
浏览 0提问于2015-12-08得票数 0
如何在jqgrid中获取列过滤时的表单数据
我使用了外部复选框，也使用了来自的更新的应答代码。
我已经使用了工作示例参考
jQuery("#list451").jqGrid({
url:'getList.php?mode=result_list',
datatype: "json",
height: 255,
width: 600,
colNames:['Index','Name', 'Code','Result'],
colModel:[
{name:'item_
浏览 1提问于2014-09-17得票数 0
回答已采纳
我有一个非常轻量级的角度库，它有一个简单的计算函数的服务。这个库作为npm模块与10+微前端angular应用程序链接。每次我对calculate函数的实现方式做一个小的改动，我们最终都会使用这个库重新构建所有的10+ angular应用程序。因此，我们不是在编译时将其链接为npm lib，而是在运行时通过cdn将该lib作为纯js lib分发，并通过导入使用它。我的问题是：
(1)如何将这个带服务的角度库编译为纯js库。
(2)通过cdn导入使用这个库，在消费angular应用时有什么特别需要做的吗？
谢谢你，室利。
浏览 0提问于2021-06-18得票数 1
我有在线招聘公告的数据，但当我希望一些变量是数字的，以创建时间序列图(如中的时间序列图)时，有些变量的结构是字符串的。
我感兴趣的三个变量转换为数值变量如下：
dataex month posted_date revenue
[CODE]
* Example generated by -dataex-. To install: ssc install dataex
clear
input str10 month str19 posted_date str32 revenue
"March_2021" "2021-03-08 10:44:15" "Less
浏览 14提问于2021-04-23得票数 0
回答已采纳
2回答
我在窗体中添加多个复选框，在将控件添加到窗体时，对于某些复选框，我已将禁用属性值设置为true。
this.myform.addControl('checkBox1'),
new FormControl({
value: true,
disabled: true,
})
);
this.myform.addControl('checkBox2'),
new FormControl({
value: true,
disabled: false,
})
);
因此，两个复选框都添加为复选框，一个是禁用的
浏览 13提问于2022-09-23得票数 2
回答已采纳
我为一份与质量管理有关的评估表格编写了代码。我有一个部分，其中设置了多个复选框，以便在代码中选中。数据库动态生成所有名称、值和ids。
@foreach ($scoreEvaluations as $scoreEvaluation)
<div class="col-sm-2">
<!-- radio -->
<div class="form-group">
<div class="form-check">
浏览 3提问于2022-07-21得票数 0
回答已采纳
我试图从foreach循环生成的复选框中获取多个值。请检查我下面的代码，并给我一些建议。谢谢。
查看文件
<?php foreach ($size_list as $size) { ?>
<label><input name="size_id" type="checkbox" value="<?php echo $size->size_id;?>" />
<?php echo $v_size_list->size;?></label>
<?php } ?&g
浏览 2提问于2016-05-30得票数 0
2回答
我是AngularJS的新手，所以我仍然试图掌握最佳实践和做事的“角力方式”。话虽如此，我的情况如下：
我正在尝试提交一份AngularJS表格。表单的一部分是我希望用户从中选择的博客名称列表。每个<li>内部都有一个复选框。当用户单击li时，我希望选中复选框，以便在表单提交时，它记录选定的博客名称。
<li>
<div>
<img ng-src="{{ image }}" />
</div>
<div>
{{ name }}
</div
浏览 1提问于2016-08-17得票数 1
回答已采纳
1回答
我正在尝试构建一个html帮助程序，用于创建一个复选框列表，该复选框将使用会话保持复选状态。在大多数情况下，当您选中和取消选中各种复选框并单击submit时，请记住复选框状态。但是，如果您选中并提交了框，然后返回并清除复选框并重新提交(当它们都被清除时)--它似乎希望记住最后的选择。这是我写的..。
HomeController
public ActionResult Index()
{
TestViewModel tvm = new TestViewModel();
return View(tvm);
}
[HttpPost]
public ActionResult Ind
浏览 2提问于2016-07-25得票数 3
回答已采纳
在Angular 2中，有没有办法通过shift和点击来选择多个复选框? angular 2中有没有什么模块？我想要angular 2解决方案，而不是jquery或JavaScript解决方案。
浏览 0提问于2017-09-19得票数 0
由于在cellrenderer函数中不能使用angular ng-model的复选框，所以我不能得到它们的值。所以我改变了我的代码
return `<input type='checkbox' ${params.value.disable ? 'disabled' : ''} ${params.value.state ? 'checked' : ''} />`;
但是当我按下get按钮时，我想得到它们的值。我怎样才能得到他们的值？
注意:为了节省时间，我使用了某人的plunker：
浏览 11提问于2018-04-09得票数 0
我有复选框列表，并希望从服务器返回一些选择的统计信息。
视图
<div ng-app="app" ng-controller="Ctrl">
<input ng-model="regionId">
{{getStatistic()}}
</div>
控制器
angular.module('app', [])
.controller('Ctrl', function($scope, $http) {
$scope.regionId = 'a
浏览 1提问于2013-12-17得票数 2
回答已采纳
1回答
我使用的是datatables库，我想在表格行中添加一些动作的复选框，我在表格中添加了复选框，并在表格标题中添加了一个复选框，用于选择所有框。 脚本： $('#checkAll').click(function () {
$(':checkbox.checkbox-mark').prop('checked', this.checked);
}); 在jsfiddle中，您可以看到更多。 但问题是，我有页面，如果我点击标题复选框，它是只选择当前页面中的所有框，但我想在所有页面中，我如何解决这个问题？
浏览 21提问于2020-10-12得票数 2
回答已采纳
2回答
查看选中复选框时不更新。我应该使用$scope.$apply吗？我需要Current state在“是”和“否”之间进行更改，这取决于是否选中了复选框。在JSbin上的代码
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title></head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/ang
浏览 7提问于2015-01-02得票数 1
回答已采纳
4回答
我是angular js的新手。我有这样的数组：
$scope.experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na'];
我是从ajax调用中获得这个数组的。因此数组的值将以任意顺序出现。
我使用ng-repeat来显示这个数组
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&
浏览 2提问于2017-09-08得票数 0
几天来，我一直在寻找如何在AngularJS中轻松地创建一个带有多个复选框的动态过滤器，而我发现的任何解决方案都不能让我满意。
下面是一个过滤器的示例，它将在未选中复选框时显示所有内容，并在选中复选框时对数据进行筛选。(对搜索引擎来说，它很适合寻找一家有无线网络、阳台的酒店.例如)
过滤器：
App.filter(‘方便函数_过滤器’，函数(){返回函数(项目，类型){ var过滤= []；var displayItem；angular.forEach(项，函数(项目){ displayItem =真；angular.forEach(类型，函数(类型，键)){if(类型== true &am
浏览 1提问于2014-07-23得票数 0
1回答
我得到了一个选择框的角度片段，它可以工作。我如何把这个变成一个复选框？
<mat-form-field class="example-medium-width">
<mat-select matInput name="learnerType" [(ngModel)]="learningPlan.learnerTypes" placeholder="Learner Type" multiple #field_learnerType="ngModel">
<mat-opt
浏览 4提问于2017-10-21得票数 0
我正在使用ngFor构建我的复选框 <ng-container *ngFor="let cb of (myList$ | async)">
<mat-checkbox
[value]="cb.name"
[checked]="cb.checked"
(change)="checkboxChange($event)" // only giving single value
>{{ cb.name }}</mat-checkb
浏览 9提问于2019-02-18得票数 2
回答已采纳
Html代码：
<p-multiSelect [options]="selectOptions" maxSelectedLabels="1" defaultLabel="Select" [(ngModel)]="selectedOptions" styleClass="multiselect-mobileregulation-width"></p-multiSelect>
角分量：
import { Component, OnInit } from '@angular/core
浏览 1提问于2019-07-30得票数 1
我有一个模型，如下：
class EmployeeJobPost(models.Model):
title = models.CharField(max_length=100,blank=True)
years_of_experience = models.IntegerField(default=0, blank=True, null=True, choices=YEARS_OF_EXPERIENCE_CHOICES)
YEARS_OF_EXPERIENCE_CHOICES = (
(0, '0-1 Years'),
(1, '1+
浏览 2提问于2013-09-03得票数 0
1回答
我正在用UWP为Windows 10开发一个应用程序。我有一个堆栈面板，其中动态地从json创建了一系列复选框。json格式的示例如下所示：
{"id":2,"type":"Testing1"},{"id":3,"type":"Testing2"},{"id":4,"type":"Testing4"},...
我能够将每个复选框的内容设置为json的"type“元素，但是，我还没有弄清楚应该如何存储"id”，以便以后可以将其用于CRUD
浏览 1提问于2017-09-30得票数 0
回答已采纳
在jqgrid中选中复选框时，我需要对jqgrid中行数据的值求和，并且需要在jqgrid.Please的页脚中显示这些数据，帮助我了解如何实现这一点。
先谢谢你，西兰巴拉桑，
浏览 0提问于2011-06-15得票数 1
回答已采纳
我有一个列表，其中包含动态数量的复选框，每个复选框都有id属性。
<li *ngFor='let i of someArray'>
<input type="checkbox" id={{i}}>
</li>
我可以将每个输入复选框赋给(ngModel)之前已知的那些数量的变量。
而是如何在保留双向绑定概念的同时，将动态数量的复选框附加到变量中。
我使用的是@angular/core 2.4.10。
浏览 1提问于2017-07-17得票数 0
1回答
我的数据库中有以下四个表(同时是分层的)：
表1:状态
+----------+-------------+
| state_id | state_name |
+----------+-------------+
| 1 | Maharashtra |
| 2 | Goa |
+----------+-------------+
表2:地区
+-------------+---------------+----------+
| district_id | district_name | state_id |
+-------------+---
浏览 19提问于2012-02-01得票数 3
回答已采纳
我有一个任务，当我选中复选框时，数据库表中的字段必须更改为TRUE (布尔值字段)，而取消选中时，它应该为FALSE。
下面是我的angular html页面复选框代码：
<checkbox-field attribute='updateExistingItems' label='Update Existing Items'></checkbox-field>
和angular/app/src/controllers/file.js：
(function () {
angular.module('myex').cont
浏览 0提问于2016-01-28得票数 1
在我的rails应用程序中，会显示一个记录列表，每个记录前面都有复选框，还有一个用来选择所有记录的复选框。我想在文本区域中添加或删除parents_contact_no数据。选中复选框时，应将相应记录的parents_contact_no添加到用逗号分隔的文本区，取消选中相应记录的复选框时，应删除相应记录的parents_contact_no。如果选中了select all复选框，则应将所有记录的parents_contact_no添加到文本区域。
必须在其中显示数字的文本区域
<div class="field">
<%= f.label :se
浏览 0提问于2015-06-23得票数 2
我正在开发angular 4应用程序，并使用反应式表单。
我想将复选框值保存在0/1而不是true/false中。现在，当我选中我的复选框时，我得到了true，在取消选中时，我得到了false，但我希望1处于选中状态，0处于未选中状态。
浏览 0提问于2017-09-20得票数 0
2回答
我们如何在Angular ( 2.x及更高版本)中获取DOM元素？诸如addClass、removeClass等基本功能在typescript中不可用，那么我们如何在angular组件中进行这些DOM操作呢？如果有的话，请给我建议。提亚
浏览 0提问于2016-11-07得票数 12
回答已采纳
我已经创建了一个JTable，最后(第6)列是一个“选择”列，其中有复选框。复选框是通过重写getColumnClass方法以返回Boolean.class来添加的。
DefaultTableModel dtm = new DefaultTableModel(data, header){
@Override
public Class<?> getColumnClass(int col) {
if(col == 5){
return Boolean.clas
浏览 3提问于2014-09-21得票数 2
回答已采纳
如何在angular js中为ng-disabled设置多个值？
我的问题是用下面的JS小提琴解释的：
<div ng-app>
<div ng-controller="myCnt">
<h3>A ->> <input type="checkbox" ng-model="check"> </input></h3>
<h3>B ->> <input type="checkbox" ng-mode
浏览 0提问于2013-08-16得票数 5
回答已采纳
我遵循的模式，反应形式与打字稿。在更改了每个对象成员之后，我编写它来更新状态。
我们有10+字段。是否有任何通用的方法来更新字段，并在中使用适当的方法？下面似乎是重复的。推荐使用any吗？
我们的表单中混合了文本框、下拉列表和复选框。
const onProductNameChange = (e: string) => {
setProductFilter({
...productFilter,
productName: e,
});
};
const onProductStatusChange = (e: string) =>
浏览 6提问于2022-08-29得票数 0
1回答
我正在启动一个新的涉及Angular5+的大项目，并使用Angular-cli作为开始。我们的计划是构建10+较小的应用程序，这些应用程序将分散在内容管理系统中的站点上。我计划实现模块的延迟加载，因此根据URL，我将指定哪个模块将被引导。
我的第一个想法是在单独的模块中构建它们，这样每个应用程序都有自己的模块。如果这是最好的方法，我该如何处理路由？我希望每个模块(应用程序)都有自己的路由与其他模块分开。
我的第二个问题是，这是最好的方法吗？有人用另一种方法做过类似的事情吗？
浏览 4提问于2018-04-19得票数 0
我有一个用angular2/3/4构建的应用程序。我有一个控制器，它用如下所示的代码初始化一个FormGroup (初始化是在它的构造函数中完成的)：
this.funcoes = this._fb.group({
"cliente": [false],
"gestorRecursos": [false],
"motorista": [false],
"gestorUtilizadores": [false]
}, { validator: ValidacoesPersonali
浏览 0提问于2018-09-20得票数 0
2回答
如何在Python中使用复选框
、、、、
我正在尝试在HTML中使用复选框，将这些复选框返回给我的python后端，然后在单击该框时递增三个计数器。
现在，我的HTML代码如下所示，运行正常：
<form method="post">
<input type="checkbox inline" name="adjective" value="entertaining">Entertaining
<input type="checkbox inline" name="adjective" valu
浏览 3提问于2012-11-06得票数 6
回答已采纳
1回答
我已经在Angular中创建了动态嵌套的复选框，如果选中，我想要获取复选框的值。我在angular中创建了一个演示项目，并面对json结构中的问题来实现功能。 ? sourcecode
浏览 15提问于2021-09-24得票数 1
如何有条件地添加元素属性，例如复选框的checked？
以前版本的Angular有NgAttr和NgChecked，它们似乎都提供了我想要的功能。然而，这些属性似乎不存在于Angular 2中，我也看不到提供此功能的其他方法。
浏览 77提问于2016-04-20得票数 343
回答已采纳
我在使用反应式表单和服务更新价值时遇到了一些问题？我找到问题了。它在组件中--> updateData()-->参数..
请帮我解决这个问题。我不知道我需要传递哪个参数？我找到问题了。它在组件中--> updateData()-->参数..
请帮我解决这个问题。我不知道我需要传递哪个参数？
HTML：
<form [formGroup]="group">
<div> Id<input formControlName="Id"/></d
浏览 0提问于2018-12-27得票数 0
5回答
我使用foreach来显示来自数据库的数据。
这是给Plan_data的
<?php foreach ($veddingPlanData as $row) { ?>
<input box with value containing "echo row->value_name" >
<?php } ?>
这是用于任务数据作为复选框(在这里，我想显示任务交给plan_id的复选框列表，它们显示为带勾勾的复选框和未选中状态的剩余列表)
<?php foreach ($veddingPlanTaskMappingData as $
浏览 3提问于2015-07-17得票数 0
回答已采纳
最初，我试图在Angular2中设置一个模板引用变量，这样我就可以在不必执行绑定的情况下逆转表的排序顺序，但当我单击复选框时，并没有得到接口的动态更新。我创建了一个简单的柱塞，以防我的应用程序中有其他东西可能干扰了代码，而且我没有看到引用的内插值正在动态更新。我将其设置为文本框，以查看输入时该值是否会更改。它似乎没有更新。
我是不是错过了什么东西在我的设置，以使这一工作？还是我试图以一种不是用来创建引用变量的方式使用这些引用变量？
import {Component} from '@angular/core'
@Component({
selector: 'my
浏览 2提问于2016-07-12得票数 3
回答已采纳
使用angular，我有一个网格，用户可以通过单击复选框来选择数据。我将选择内容存储在一个数组中。 下面是选中复选框的代码 getCheckedItemList() {
let selectedData: any[];
//loop through array of data, find selected and populate selectedData array.
//Below line sets selected data to the service
this.myService.setSelectedData(this.selectedData);
} 下面
浏览 1提问于2019-04-19得票数 0
回答已采纳
1回答
我使用angular ui在angular js中路由。我有一个像.But这样的url，我想使用别名，并且有像这样的url。在angular ui中可以吗？？
这是我的配置
angular.module('News', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: "/news",
templateUrl:
浏览 2提问于2016-04-10得票数 0
我使用这段代码用索引替换字符串中找到的所有值：
int i = 0;
input = "FGS1=(B+A*10)+A*10+(C*10.5)";
Regex r = new Regex("([A-Z][A-Z\\d]*)");
bool f = false;
MatchEvaluator me = delegate(Match m)
{
f = true;
i++;
return "i" + i.ToString();
};
do { f = false; input = r.Replace(input, me); } while
浏览 2提问于2014-12-28得票数 4
回答已采纳
1回答
我将trigger('click')用于单选按钮和复选框。它适用于单选按钮，对吧：
angular.forEach(angular.element.find('input'), function(node){
angular.forEach(result.data.test, function(value, key){
if(node.value == value.FieldValue) {
// ** JUST SEE THIS LINE ** //
// This works fine
浏览 0提问于2016-05-21得票数 1
1回答
我的angular2视图中有(n)复选框和一个按钮。当我单击其中之一时，会调用一个函数。当我单击按钮时，必须取消选中每个复选框。怎么做？？(n)可动态变化。
浏览 3提问于2017-10-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
