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
    }
}

您应该使用（更改）而不是（点击），因为这样更好练习
停止思考JS。您现在正在使用Typescript和有角度的。这些框架的存在是因为香草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>

然后，我将为实例长度使用错误值填充数组。仅当您需要知道哪些人已被打勾时，还有其他方法可以这样做，但是想到这一点。

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

然后我将使用event.target.checked来获取clicked复选框的选中值，并根据索引值更改适当的数组值。记住也要在此处添加参数。

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

display:none;

Answer 5

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

尝试一下

创建布尔变量public checkBoxValidate;

并在 ngOnInit（） false

中为变量设置值this.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

在Angle 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'));

        });
    }

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

6 个答案: