Checkbox css works only first loop item

Question

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

you can't have multiple items with the same id. Now all your checkboxes have the same id "box1" — Jeff, Jun 19 '17 at 06:04
When you format the code with proper nesting, some HTML and PHP issues also appear — mplungjan, Jun 19 '17 at 06:06
@Pankaj Makwana but how to add css? because id have changed. — , Jun 19 '17 at 06:15
Check this out link : You might not have added font-awesome.css https://jsfiddle.net/imail2pankaj/pan6ccys/ — Pankaj Makwana, Jun 19 '17 at 06:25
See here - working version: https://jsfiddle.net/mplungjan/ayj0cyh5/ - @PankajMakwana also posted a working version — mplungjan, Jun 19 '17 at 06:31
@mplungjan even my code is working here : https://jsfiddle.net/imail2pankaj/pan6ccys/ — Pankaj Makwana, Jun 19 '17 at 06:37

score 2 · Answer 1 · edited Jun 19 '17 at 06:07

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

edited Jun 19 '17 at 06:07

mplungjan

134,906
25
152
209

answered Jun 19 '17 at 06:03

clarkoy

374
2
16

yes this is valid answer. – Bhavin Thummar Jun 19 '17 at 06:07
because id gives the reference to for using the unique names. – Bhavin Thummar Jun 19 '17 at 06:08
but how to add css? because every id have changed – Jun 19 '17 at 06:18
@mplungjan My checkbox is worked before the adding css. So its not duplicate question. My problem is after adding css checkbox not worked properly. – Jun 19 '17 at 06:23
1

Your code would not have worked either before. Not without unique IDs - post a [mcve] – mplungjan Jun 19 '17 at 06:27
what if IDs are unordered? – Milot25 Jan 01 '18 at 17:51

Checkbox css works only first loop item

1 Answers1