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

Posted 2021-03-27

我有一个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

答案

要实现所需，您需要使用委托事件处理程序，因为在页面加载后动态追加行，以挂钩复选框的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>

另一答案

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

$(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>

以上是关于单击复选框，动态更改表格中的文本的主要内容，如果未能解决你的问题，请参考以下文章

如何通过动态单击按钮来更改选项卡标题名称？

单击表格视图中的按钮时如何更改表格视图外部的标签文本

动态 TextView 未在片段中更新

动态更改占位符文本

bootstrap table如何合并行，是用js启动的表格，数据是动态的。类似表格重绘，该怎么写

Android用复选框onClick刷新TextView？