0

I have a problem. I am created checkbox with font-awesome heart shape icon for saving favorite item in a loop. But only 1st checkbox works and others checkbox not worked. When I click the second or other loop checkbox, its checked 1st loop check box, second loop and other loop checkbox not working. Why this happened? Thanks!

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; }
Improve this question
7
  • 1
    you can't have multiple items with the same id. Now all your checkboxes have the same id "box1" Commented Jun 19, 2017 at 6:04
  • When you format the code with proper nesting, some HTML and PHP issues also appear Commented Jun 19, 2017 at 6:06
  • try doing <input id="box<?=$row['id']?>" type="checkbox" /> <label for="box<?=$row['id']?>">Checkbox 1</label> Commented Jun 19, 2017 at 6:07
  • @Pankaj Makwana but how to add css? because id have changed. Commented Jun 19, 2017 at 6:15
  • Check this out link : You might not have added font-awesome.css jsfiddle.net/imail2pankaj/pan6ccys Commented Jun 19, 2017 at 6:25

1 Answer 1

Reset to default
2

Make a counter for the id and for since ID must be unique

$ctr = 0;

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

$ctr++;
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

yes this is valid answer.
because id gives the reference to for using the unique names.
but how to add css? because every id have changed
@mplungjan My checkbox is worked before the adding css. So its not duplicate question. My problem is after adding css checkbox not worked properly.
Your code would not have worked either before. Not without unique IDs - post a minimal reproducible example
|