重复部分中的图像复选框

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>标签的内容，只需要包含一次。