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

单击样式复选框时，单击标签。标签通过id属性附加到其匹配复选框的for，并且每个循环必须是唯一的。

如果我们看看你的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>

并对第一个复选框执行相同操作使用＆＃34; checkOne＆＃34;在艺术家身份之前。每个标签都有一个唯一的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;
}

样式复选框显示错误框已选中

1 个答案: