重複圖像複選框部分

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>標記的內容，只需要包含一次即可。