0

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

我试图在一个表格的重复部分中使用它：

<?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)); ?>

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

感谢你们对我的帮助！

4

1 回答 1

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>在每个循环中添加标签的内容，只需包含一次。

于 2013-08-05T21:58:06.650 回答