php - 样式化的复选框显示错误的复选框被选中

Question

我有一个从数据库中填充的艺术家列表(一个很长的列表)，每个艺术家都有一个编辑复选框和一个删除复选框。有一个提交按钮(不包括在内，工作正常)。我没有包含编辑/删除过程的代码，因为我知道这些工作。

我已经用 CSS 设置了复选框的样式。出于测试目的，我没有删除标准复选框。

当我单击任何艺术家的标准复选框时，他们会正确执行并显示该复选框已选中。但是，当我对样式化的复选框执行相同操作时，只有第一个复选框显示它已被选中。示例:单击第 5 个艺术家复选框，第 1 个艺术家复选框显示已选中。

Inspector 显示每个复选框都显示了标准和样式复选框的正确值。

在网上找不到类似的问题，所以大家有什么想法。非常感谢。

artist.php代码————————————————-

<?php
include 'core/init.php';
protect_page();

$artists = get_artists($_GET['artist_id']);

$artist_id = $_GET['artist_id'];
$id = $artist_id;


if (!empty($_POST['edit'])) {
foreach ($_POST['edit'] as $artist_id) {
header("Location: artist_edit.php?artist_id=$artist_id");
exit();
}   
}else{
if (!empty($_POST['delete'])) {
foreach ($_POST['delete'] as $artist_id) {
artist_delete($artist_id);
header('Location: artist_list.php');
exit();
}
}
}   
?>
<h1>Artist List</h1>


<?php
foreach ($artists as $artist) {
echo '
<tr>
<td class="alt1" align="center" valign="middle">
<input name="edit[]" type="checkbox" value="',$artist['artist_id'],'">
</td>
<td class="alt1" align="center" valign="middle">
<input name="delete[]" type="checkbox" value="',$artist['artist_id'],'">
</td>
<td class="alt1" align="center" valign="middle">
<div class="checkboxone">
<input type="checkbox" name="edit[]" id="checkboxoneinput" value="',$artist['artist_id'],'">
<label for="checkboxoneinput"></label>
</div>
</td>
<td class="alt1" align="center" valign="middle">
<div class="checkboxtwo">
<input type="checkbox" name="delete[]" id="checkboxtwoinput" value="',$artist['artist_id'],'">
<label for="checkboxtwoinput"></label>
</div>
</td>
</tr>
<tr>
</td>
</tr>
';
}
?>

css 代码 [checkboxone 和 checkboxtwo 的代码相同]————————-

/*input[type=checkbox] {
visibility: hidden;
}*/
.checkboxone {
width: 25px;
margin: 0;
position: relative;
}
.checkboxone label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
left: 0;
background: rgba(11, 78, 126, 0.5);
border:1px solid rgba(11, 78, 126, 0.5);
border-radius: 4px;
}
.checkboxone label:after {
opacity: 0.1;
content: '';
position: absolute;
width: 8px;
height: 4px;
background: transparent;
top:3px;
left: 2px;
border: 3px solid #fff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkboxone label:hover::after {
opacity: 0.4;
}
.checkboxone input[type=checkbox]:checked + label:after {
opacity: 1;
}

Answer 1

当您点击一个带样式的复选框时，您就是在点击一个标签。标签通过 for 属性附加到其匹配复选框的 id 并且它们对于每个循环必须是唯一的。

如果我们查看您的 php:

<input type="checkbox" name="delete[]" id="checkboxtwoinput" value="',$artist['artist_id'],'">
<label for="checkboxtwoinput"></label>

注意 for 属性如何始终具有值 checkboxtwoinput 而 id 属性如何始终具有相同的值。每个标签都会选中第一个复选框。

像这样为每个输入创建一个唯一的 ID 和属性:

<input type="checkbox" name="delete[]" id="checkTwo ' . $artist['artist_id'] . ' " value="',$artist['artist_id'],'">
<label for="checkTwo ' . $artist['artist_id'] . ' "></label>

并对第一个复选框执行相同操作在艺术家 ID 前使用“checkOne”。每个标签都有一个唯一的 ID 和与 artist_id 匹配的属性。

当然，如果需要，您可以使用整型变量代替艺术家 ID:

$i = 1;
foreach ($artists as $artist) {

    <input type="checkbox" name="delete[]" id="checkTwo ' . $i . ' " value="',$artist['artist_id'],'">
    <label for="checkTwo ' . $i . ' "></label>

    ++$i;
}