单击复选框，动态更改表格中的文本

Question

我有一个JSON格式的数据，我将其转换为HTML table。现在，如果选中复选框，我想将文本从False更改为True。我怎样才能做到这一点？

以下是创建HTML表的代码：

$.each(result, function (index, value) { 
  var Data = "<tr>" +
    "<td class='' id='stdID' >" + value.StudentID + "</td>" +
    "<td class='' id='stdRol'>" + value.RollNo + "</td>" +
    "<td class='' id='stdName'>" + value.FirstName + "</td>" +
    "<td class='cbx' value='1'><input  type='checkbox' id='cc"+index+"'><span id='checkbox-value'> False</span></td>" +
    "</tr>";
  SetData.append(Data);

这就是结果：output

Answer 1

要实现所需，您需要使用委托事件处理程序，因为在页面加载后动态追加行，以挂钩复选框的change事件。然后，您可以根据span属性设置兄弟checked元素的文本。像这样的东西：

$('table').on('change', ':checkbox', function() {
  $(this).next('span').text(this.checked);
});

span.checkbox-value { text-transform: capitalize; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="stdID">value.StudentID</td>
    <td class="stdRol">value.RollNo</td>
    <td class="stdName">value.FirstName</td>
    <td class="cbx" value="1">
      <input type="checkbox" id="cc1">
      <span class="checkbox-value">False</span>
    </td>
  </tr>
  <tr>
    <td class="stdID">value.StudentID</td>
    <td class="stdRol">value.RollNo</td>
    <td class="stdName">value.FirstName</td>
    <td class="cbx" value="1">
      <input type="checkbox" id="cc2">
      <span class="checkbox-value">False</span>
    </td>
  </tr>
</table>

您应该注意，您的循环正在创建多个具有相同id的元素，这是无效的HTML。在上面的例子中，我把它们改为了类。

Answer 2

另一种方法来实现您想要的输出

$(document).on('change', '.changeStatus', function() {
  var row = $(this).closest('tr');
  if($(this). prop("checked") == true){
    row.find('.changeValue').html('True');
  } else {
  	row.find('.changeValue').html('False');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
    <tr>
      <td>Id</td>
      <td>Roll_no</td>
      <td><input type="checkbox" class="changeStatus"></td>
      <td class="changeValue">False</td>
    </tr>
  </tbody>
</table>