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

【问题标题】：how to get value of checkbox in table in javascript如何在javascript中获取表格中复选框的值
【发布时间】：2019-05-28 03:52:34
【问题描述】：

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

我的桌子：

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);

【问题讨论】：

children[0] 在某些行中是 label。
是的，但是里面有一个输入。无论是否选中，我都需要它的值。

标签： javascript html

【解决方案1】：

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

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

也只是一个提示，当您在 javascript 中使用非常大的 html 块时，请使用模板文字（这些 ---> ``）。它们让您编写更具可读性的多行字符串，例如：

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

【讨论】：

我像这样更改了我的代码，它返回未定义！ ` for (var i = 1; i

【解决方案2】：

您无法通过 .value 访问复选框的值。
它可以通过 .checked 访问。
所以你应该检查孩子的类型。如果它不等于复选框推送值，但如果它等于“复选框”，则应该推送选中。
如果您需要更多描述，请随意。

【讨论】：

【解决方案3】：

我这样修复它，它对我有用：

$('.en-ajax-button').on('click', function(e){
     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++){
              if (j != 2){
                   rowArray.push(tbl.rows[i].cells[j].children[0].value);
              } 
              else{
                   rowArray.push(tbl.rows[i].cells[j].children[0].children[0].checked);
              }
          }
          allArray.push(rowArray);
    }
    console.log(allArray);
});

【讨论】：