通过单击复选框，使用动态更改表中的文本

Question

我有一个JSON格式的数据，并将其转换为HTMLtable。现在我想如果选中复选框，请将文本从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);

这是这样的结果：输出

Answer 1

要实现您的要求，您需要使用委托事件处理程序，在页面加载后动态追加行，以挂接到复选框的change事件。然后，可以基于checked属性设置同级span元素的文本。类似这样的东西：

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