在php中使用动态创建的单选按钮的onclick标记更改图像

亲爱的Stackoverflow

我试图获取与之关联的图像路径并显示它，但没有成功：

<?php 
$query = "SELECT img_path FROM oc_product_color Order by color_id" ; 
$result = mysql_query($query) ;
$counter = 0 ;
$z=0;
while($row = mysql_fetch_assoc($result))
   {
        $color[$counter] = $row['img_path'];
       $counter = $counter + 1;
   }
?>
<div>
    <font size="4">Choose Your Product Color:</font>
</div>
<style>
    label > input{ /* HIDE RADIO */
    visibility: hidden;
    position: absolute;
    }
    label > input + img{ /* IMAGE STYLES */
    cursor:pointer;
    border:2px solid transparent;
    }
    label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
    border:2px solid #A8813E;
    }
</style>
<style>
    .grow img {
    height: 24px;
    width: 24px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    }
    .grow img:hover {
    width: 50px;
      height: 50px;
    }
</style>

<div>
            <?
            if($counter>0)
                {
                        for($z=0;$z<$counter;$z++)
                            {
                            ?> 
            <tr >
                <?
                    if($z<$counter)
            {
                ?>
                <label class="grow pic">
                    <input type="radio" name="color" checked="checked" value="small" onclick =  />
                    <img src=<?php echo $color[$z];?> width="16px" height="16px" />
                </label>
                <?
            }   
            ?>   

            </tr>

     <? }
     }  ?>
        </a></div>
</div>
<label for="color"><img src = "<?php echo $color[$z] ?>"></label>
</div>
<br>
</div>

我是php新手，已经成功地完成了这段代码

任何帮助都将不胜感激

对不起，我英语不好

谢谢和问候

---

Akki2401

我不确定你在问什么，但我觉得这就是你在寻找的！试试这个

<label for="color"><img src = "<?php echo $color[$z] ?>"></label>

---

试着在这里拨弄一下

对应的JS在哪里？事实上，我使用的是一个模板，所以我无法在其中真正看到JS。对不起，这不是我想要的。实际上，我的单选按钮是根据mysql数据库动态创建的。所以我想显示一个与之关联的图像

<div class="radio-buttons">
    <input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
    <label class="radio-label" for="r1"></label>
    <input type="radio" name="rGroup" value="2" id="r2" />
    <label class="radio-label" for="r2"></label>
    <input type="radio" name="rGroup" value="3" id="r3" />
    <label class="radio-label" for="r3"></label>
</div>

.radio-buttons .radio-label{
    background-color:#E8C504;
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:40px;
}

.radio-buttons input[type=radio]{
    display:none
}

.radio-buttons input[type=radio]:checked + .radio-label{
    background-color:#241009
}