Question

我有问题。我创建了一个带有font-awesome心形图标的复选框，用于在循环中保存喜欢的项目。但只有第一个复选框工作，其他复选框不起作用。当我单击第二个或其他循环复选框时，其选中的第一个循环复选框，第二个循环和其他循环复选框不起作用。为什么会这样？谢谢！

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; }

Answer 1

为id和for设置一个计数器，因为ID必须是唯一的

$ctr = 0;

<input id="box'+$ctr+'" type="checkbox" />
<label for="box'+$ctr+'">Checkbox 1</label>

$ctr++;

Checkbox css仅适用于第一个循环项

1 个答案: