我的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的输入元素,看看它是否已检查。
在这里的任何帮助/方向将不胜感激。
的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
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句