0

別の投稿で、チェックボックスの代わりにカスタム画像を使用する方法を見ました。これは Web では便利で、スマートフォンでの指の使用には重要です。

私はフォームの繰り返し部分でそれを使用しようとしました:

<?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 に答える