javascript - 如何在javascript中获取表格中复选框的值

Question

我需要获取表格行中带有 span 的复选框的值。下面的代码是我项目的一部分。 HTML 代码用于动态我的表格，javascript 代码用于获取不适用于复选框的元素的值(它适用于其他输入元素)。

我的 table :

var html = '<tr class="rows" id="r'+row_id+'" style="">';
html += '<td><input type="text" id = "abc" style="height:30px" class="rtl form-control" size="20" name="" /></td>';
html += '<td><input type="text" style="height:30px" class="rtl form-control" size="25" name="" /></td>';
html += '<td style="text-align: center;">'+
'<label class="switch switch-label switch-pill switch-primary switch-sm" style="direction:ltr;">'+
'<input type="checkbox" value="1" data-size="mini" class="switch-input">'+
'<span class="switch-slider" data-checked="✓" data-unchecked="✕" unchecked></span></label>'+
'</td>'+
'<td><button class="btn btn-warning DT_action_minus" id="btn'+row_id+'" style="height:25px;width:25px;padding:0px;" href="#" title="delete">'+
'<i class="fa fa-minus" style="align:center" aria-hidden="true"></i></button></td>'+
'</tr>';

获取值:

var tbl = document.getElementById('descriptive-table');
var rCount = tbl.rows.length;
var cCount = 3;
var allArray = [];
for (var i = 1; i <rCount; i++){
    var rowArray = [];
    for (var j = 0; j <cCount; j++){                            
        rowArray.push(tbl.rows[i].cells[j].children[0].value);
    }
    allArray.push(rowArray);
}
console.log(allArray);

Answer 1

要获取复选框的值，您需要评估“checked”属性而不是值:

tbl.rows[i].cells[j].children[0].checked <--- true or false

还有一个提示，当您在 javascript 中使用非常大的 html block 时，请使用模板文字(这些 ---> ``)。它们让您编写多行字符串，这更具可读性，例如:

const myHMTLBlock = `
  <div>
     <span></span>
  <div/>
`