动态选中"hobby"复选框，通过不同的 ID 根据数据库值选中

Question

我的问题：第一次我点击编辑按钮然后根据数据库表值选中复选框，然后第二次我点击其他编辑按钮然后第一次复选框值没有取消选中，我不知道我的代码中有什么错误。 请检查我的代码。

示例：在表单屏幕截图中，当第一个编辑按钮时，我单击然后选中复选框值(如板球，福基，国际象棋(，在第二个编辑按钮后，我单击然后选中复选框值(板球(，但问题是第一次复选框值(如板球，霍基，国际象棋(未选中，请帮助我，

请检查下面的屏幕截图：

表单截图

网页代码：

<form id="crudform" method="post">
<label>Hobby:</label>
<input type="checkbox" name="hobby[]" value="cricket">Cricket
<input type="checkbox" name="hobby[]" value="hokky">Hobby
<input type="checkbox" name="hobby[]" value="chess">Chess
<input type="submit" name="submit" value="Add">
</form>
<div class="table"></div>

数据库表屏幕截图

PHP代码：

<table>
<thead>
<tr>
<th>Hobby</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
<?php if(mysqli_num_rows($result)>0){ ?>
<?php while($data = mysqli_fetch_assoc($result)){ ?>
<tr>
<td><?php echo $data['hobby'];?></td>
<td><button name="edit" data-id = <?php echo $data['id'];?> class="btn btn-info">Edit</button></td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>

Jquery Code：

<script type="text/javascript">
$("button[name=edit]").click(function(){
var id = $(this).attr("data-id");
var hobbyss = [];
$(":checkbox").each(function(index,element){
hobbyss.push($(this).val());
});

$.ajax({
url:"http://localhost/interview/crud_checkbox/edit.php",
method:"post",
data:{id:id},
dataType:"json",
success:function(response){
var hobby = response.hobby.split(",");          // ["cricket", "hokky", "chess"]    
$.each(hobby,function(index,element){
if($.inArray(element,hobbyss) >= 0){
console.log($("input[value="+element+"]").prop("checked",true));
}
}); 
}
});
});
</script>

Answer 1

每次在编辑按钮上单击添加选中的属性，但您忘记删除先前选中的复选框的选中属性。 因此，您需要取消选中编辑按钮单击上的所有复选框，如下所示。

$("button[name=edit]").click(function(){
	$('input[name=hobby\[\]]').prop('checked',false);

//rest of your code here 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="crudform" method="post">
	<label>Hobby:</label>
	<input type="checkbox" name="hobby[]" value="cricket" checked >Cricket
	<input type="checkbox" name="hobby[]" value="hokky">Hobby
	<input type="checkbox" name="hobby[]" value="chess" checked >Chess
	<input type="submit" name="submit" value="Add">
</form>
<button name="edit" data-id ="1" class="btn btn-info">Edit</button>