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

Vignesh SP

我的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的输入元素,看看它是否已检查。

在这里的任何帮助/方向将不胜感激。

devpato

的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。您现在正在使用Typescript和Angular。这些框架之所以存在,是因为Vanilla JS很烂,因此在使用这种很棒的库/框架时无需继续编写Vanilla js。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

检查是否在Angular中选中了复选框

确定是否在Ionic 2中选中了复选框

Angular 2:默认选中了ngFor中的复选框

如何验证是否在 jquery ajax .prop fumction() 中选中了复选框?

检查是否在引导程序中选中了复选框

如何读取是否在ajax中选中了复选框?

角度检测是否从.ts中选中了复选框

Laravel验证之间是否选中了复选框

如何验证是否选中了复选框(即标签)?

如何检查是否在Angular中选中了任何复选框

angular2材质复选框是否已选中

在Angular2中选中复选框时启动事件

Yii2:验证是否至少选中了一个复选框

如何知道使用angular2选中了所有复选框?

如何读取PHP中是否选中了复选框?

如何取消选中angular2中的复选框

如果在Symfony中选中了复选框,则关闭对表单类型的验证

确定是否从使用循环创建的一组复选框中选中了某个复选框

如果在 Angular 2+ 中选中了三个以上,则禁用复选框

查找是否在父div中选中了所有复选框

如何提醒是否在复选框C#中选中了多个

在PowerApps中选中了有效复选框

如果选中了父复选框,则在laravel中选中子复选框

如何检查PyQt5中选中了哪些复选框

确定在复选框列表MVC 5(editorfor)中选中了哪些复选框

检查在给定的复选框中选中了哪些复选框

Java检查是否选中了复选框

检测是否使用opencv选中了该复选框

Div应该显示是否选中了任何复选框