重新加载页面时，复选框如何保持选中状态

Question

我有一个dataTable从MySql数据库加载所有数据，当我添加新行时，第一个复选框会自动增加，用户会选中(或取消选中(它。我希望在重新加载页面时保留复选框结果。但问题是只有第一行的第一个复选框有效。

这是我的Javascript

// Avoid scoping issues by encapsulating code inside anonymous function
(function() {
// variable to store our current state
var cbstate;

// bind to the onload event
window.addEventListener('load', function() {
// Get the current state from localstorage
// State is stored as a JSON string
cbstate = JSON.parse(localStorage['CBState'] || '{}');

// Loop through state array and restore checked 
// state for matching elements
for(var i in cbstate) {
var el = document.querySelector('input[name="' + i + '"]');
if (el) el.checked = true;
}

// Get all checkboxes that you want to monitor state for
var cb = document.getElementsByClassName('save-cb-state');

// Loop through results and ...
for(var i = 0; i < cb.length; i++) {

//bind click event handler
cb[i].addEventListener('click', function(evt) {
// If checkboxe is checked then save to state
if (this.checked) {
cbstate[this.name] = true;
}

// Else remove from state
else if (cbstate[this.name]) {
delete cbstate[this.name];
}

// Persist state
localStorage.CBState = JSON.stringify(cbstate);
});
}
});
})();
</script>```
It is my html and php code
`<div id="table-container">
<div id = "checkbox-container">
<form method="POST" action="action.php">
<table width="100%" border="1" id='dataTable'>
<?php
$username = $_SESSION["username"];
require_once("includes/connection.php");
$sql = "SELECT * from form where username = '$username'";
$result = $conn->query($sql);
echo '<tableborder="1">';
echo '<tr>';
echo '<th>已列印</th>';
echo '<th>選擇</th>';
echo '<th>流水編號</th>';
echo '<th>賬號</th>';
echo '<th>專案代碼</th>';
echo '<th>利潤中心</th>';
echo '<th>發生日</th>';
echo '<th>項目</th>';
echo '<th>科目</th>';
echo '<th>支出金額</th>';
echo '<th>有無單據</th>';
echo '<th>領收款人</th>';   
echo '<th>備註</th>';
//echo '<th>刪除</th>';
while ($output = mysqli_fetch_assoc($result)) {
echo '<tr>';
echo "<td><input type='checkbox' class='save-cb-state' name='mycheckbox' value='" .$output['id']. "'></td>";
echo "<td><input type='checkbox' name='checkbox[]' value='" .$output['id']. "'></td>";
echo '<td>'.$output['id'].'</td>';
echo '<td>'.$output['username'].'</td>';
echo '<td>'.$output['department'].'</td>';
echo '<td>'.$output['center'].'</td>';
echo '<td>'.$output['createdate'].'</td>';
echo '<td>'.$output['object'].'</td>';
echo '<td>'.$output['subject'].'</td>';
echo '<td>'.$output['total_money'].'</td>';
echo '<td>'.$output['receipt'].'</td>';
echo '<td>'.$output['name'].'</td>';
echo '<td>'.$output['note'].'</td>';
//echo '<td><input type="button" name="delete" value="刪除"></td>';
//echo "<td><button action='delete.php' method='POST' value='" .$output['id']. "' class='btn btn-danger'> Delete</button></td>";
};
echo '</table>';
?>
</table>
<input type="submit" name="delete" id="delete" value="刪除">
<input type="submit" name="print_pdf" id="print_pdf" value="列印">
</form>
</div>
</div>

Answer 1

问题在于输入的name：

• 您有多个具有相同名称'mycheckbox'的输入
• 名称为'checkbox[]'的输入过于通用，无法保存状态

要解决此问题，请根据索引计数器更改输入的名称，如下所示：

echo "<td><input type='checkbox' class='save-cb-state' name='mycheckbox-$idx' value='" .$output['id']. "'></td>";
echo "<td><input type='checkbox' name='checkbox[$idx]' value='" .$output['id']. "'></td>";
$idx++;

在这个例子中，我创建了一个$idx变量，它包含一个整数，用于计算每次迭代并帮助为每个输入创建不同的名称——我们通过将$idx变量添加到输入名称中来实现这一点。