通過單擊復選框動態更改表格中的文本

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

這是這樣的結果：輸出

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>