验证是否在 Angular2 中选中了输入复选框

Question

我的HTML中有一个表格，每行都有一个单元格，有一个输入复选框。

现在我正在尝试检查复选框是否已选中，以下是我尝试过的。

.HTML：

<table class="table table-hover" id="just_a_table">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">IP Addr</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of instances">
<td><input type="checkbox" (click)='onSelect()'></td>
<td>{{data["IP"]}}</td>
</tr>
</tbody>
</table>

TS：

onSelect() {
// We get the table data from the html and find if the checkbox is active.
// The rows of the tables can be accessed by "rows" object and cells can be accessed using "cells" object.
this.table_data = document.getElementById("just_a_table")
for (var i=1, row; row = this.table_data.rows[i]){
for (var j=0, cell; cell = row.cells[j]){
if (<HTMLInputElement>cell[1].checked){
console.log("It is checked")
}
}
}
}

我这样做是因为我不想获取带有其 ID 的输入元素并查看它是否选中。

这里的任何帮助/指示将不胜感激。

Answer 1

HTML

<table class="table table-hover" id="just_a_table">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">IP Addr</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of instances">
<td><input type="checkbox" (change)='onSelect($event)'></td>
<td>{{data["IP"]}}</td>
</tr>
</tbody>
</table>

您需要检查event.target.checked才能解决此问题。这是您实现的方法：

TS

onSelect(event) {
if ( event.target.checked ) {
// Your logic here
}
}

1. 你应该使用(更改(而不是(点击(，因为它更好 实践
2. 停止在JS上思考。您现在正在使用打字稿和 角。这些框架存在是因为香草JS很烂，所以不需要 当你使用这个真棒时继续写香草 js 库/框架

Answer 2

首先，我将使用 Angular(单击(事件绑定，我还会将您的 ngFor 循环更改为：

<tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">

现在我们可以使用索引来知道选中了哪个复选框。

<table class="table table-hover" id="just_a_table">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">IP Addr</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">
<td><input type="checkbox" value="false" (click)='onSelect($event, i)'></td>
</tr>
</tbody>
</table>

然后，我将用 false 值填充一个数组作为实例的长度。这仅在您需要知道勾选了哪一个时才有其他方法可以做到这一点，但想到了这个。

constructor() {
for (let i = 0; i < this.instances.length; i++) {
this.resultArray.push(false);
}
}

然后，我将使用 event.target.checked 来获取单击的复选框的选中值，并根据索引值更改相应的数组值。请记住在此处添加参数。

onSelect(event, index) {
// If you need to know which checkboxes are checked
this.resultArray[index] = event.target.checked;
// If you don't
const result: EventTarget = event.target.checked;
// Do something with value
}

Answer 3

<tr *ngFor="let data of instances">
<td><input type="checkbox" (click)='onSelect($event)'></td>
<td>{{data["IP"]}}</td>
</tr>

onSelect(eventObject) {
if (eventObject.target.checked) {
// your logic here.
console.log('checked', eventObject.target.checked);
}

希望，这会对你有所帮助！！ :)

Answer 4

onSelect() {
this.table_data = document.getElementById("just_a_table");
for (var i=1, row; row = this.table_data.rows[i]; i++){
for (var j=0, cell; cell = row.cells[j]; j++){
if (cell[1].children[0].checked){
console.log("It is checked");
}
}
}
}

Answer 5

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

试试这个，

创建布尔变量public checkBoxValidate;

并在ngOnInit((中为变量设置值falsethis.checkBoxValidate = false;

<table class="table table-hover" id="just_a_table">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">IP Addr</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of instances">
<td><input type="checkbox" (click)='onSelect()'></td>
<td>{{data["IP"]}}</td>
</tr>
</tbody>

TS

onSelect()
{
if(this.checkBoxValidate == false)
{
this.checkBoxValidate = true;
}
else
{ 
this.checkBoxValidate = false;
}
}

如果此变量为 true 表示复选框处于选中状态，则取消选中

复选框 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 6

在 angular 2+ 上，使用如下：

<div class="togglebutton">
<label>
<input type="checkbox" [checked]="record.isStatus" (change)="changeStatus(record.id,$event)">
<span class="toggle"></span>
</label>
</div>

在您的 ts 文件上，

changeStatus(id, e) {
var status = e.target.checked;
this._companyHubService.addOrRemoveStatus(id, status).subscribe(result => {
this.modalSave.emit();
if (status)
this.notify.success(this.l('AddedAsStatus'));
else
this.notify.success(this.l('RemovedFromStatus'));
});
}