html - 重复部分中的图像复选框

Question

我在另一篇文章中看到了如何使用自定义图像而不是复选框。这在网络中很好，对于智能手机上的手指使用很重要。

我尝试在表单的重复部分中使用它:

<?php do { ?>


    <div id="one"><?php echo $row_Articles['article_name']; ?>
    </div>

  <div>

    <style>
  input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + label
   {
       background: url(../images/icons/unchecked.png) no-repeat;
       height: 28px;
       width: 28px;
       display:inline-block;
       padding: 0 0 0 0px;
   }


 input[type=checkbox] + label:hover
    {
        background: url(../images/icons/hover.png) no-repeat;
        height: 28px;
        width: 28px;
        display:inline-block;
        padding: 0 0 0 0px;
    }


   input[type=checkbox]:checked + label
    {
        background: url(../images/icons/checked.png) no-repeat;
        height: 28px;
        width: 28px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
    </style>

      <input name="auswahl[]" type="checkbox" id="auswahl[]" value="<?php echo $row_Articles['article_id']; ?>,<?php echo $row_Articles['article_name']; ?>"><label for="auswahl[]"></label>
    </div>


  <?php } while ($row_Articles = mysql_fetch_assoc($Articles)); ?>

未检查和悬停图片效果很好。但是，当我单击图像按钮时，总是且只有第一个复选框会更改为选中图片。以同样的方式，我只能取消选中第一行，但可以单击任何图片复选框。我搜索了几个小时，没有结果。有人看到我的错误了吗？

谢谢你帮助我!

Answer 1

您正在将每个复选框设置为具有相同的 id .根据 HTML 规范，元素的 id 值需要是唯一的，因此在实现复选框的地方，您需要执行以下操作:

<input name="auswahl[]" type="checkbox" id="auswahl_<?php echo $row_Articles['article_id']; ?>" value="<?php echo $row_Articles['article_id']; ?>,<?php echo $row_Articles['article_name']; ?>"><label for="auswahl_<?php echo $row_Articles['article_id']; ?>"></label>

只要每个 $row_Articles['article_id'] 就有效是唯一的，否则您将需要在 do/while 循环中添加一个递增整数，并使用它来创建 id输入的属性和 for标签的属性。

此外，您不需要添加 <style> 的内容标签在每个循环中，只需要包含一次。