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

转发器部分中的图像复选框

1 个答案: