<分区>
<分区>
我有一个问题。我创建了带有字体超棒的心形图标的复选框，用于在循环中保存最喜欢的元素。但只有第一个复选框有效，其他复选框无效。当我单击第二个或其他循环复选框时，其选中的第一个循环复选框、第二个循环和其他循环复选框不起作用。为什么会这样？ 谢谢!
HTML:
$query = $db->query("SELECT * FROM theme_upload WHERE approve_status != '0' ORDER BY id DESC LIMIT $limit ");
if($query->num_rows > 0){ ?>
while($row = $query->fetch_assoc()){
$postID = $row['id'];
//var_dump($row);
?>
<!-- Template #1 -->
<div class="col-sm-6 col-md-4">
<div class="single-template">
<h3>
<a href="http://hibootstrap.com/onepage/martian/" class="theme-link" target="_blank">
<?php echo $row["theme_name"]; ?>
</a>
</h3>
<div class="fav">
<input id="box1" type="checkbox" />
<label for="box1">Checkbox 1</label>
</div>
</div>
</div>
</div>
</div>
<!-- /.Template #1 -->
<?php } ?>
<?php echo $pagination->createLinks(); ?>
<?php } ?>
CSS:
.fav input[type=checkbox] { display:none; }
.fav input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
.fav input[type=checkbox] + label:before { content: "\f08a"; }
.fav input[type=checkbox] + label:before { letter-spacing: 10px; }
.fav input[type=checkbox]:checked + label:before { content: "\f004"; }
.fav input[type=checkbox]:checked + label:before { letter-spacing: 10px; }
最佳答案
为 id 和 for 创建一个计数器，因为 ID 必须是唯一的
$ctr = 0;
<input id="box'+$ctr+'" type="checkbox" />
<label for="box'+$ctr+'">Checkbox 1</label>
$ctr++;
关于php - 复选框 css 仅适用于第一个循环项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44623185/