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

Question

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

Dear Stackoverflow

I tried to get the image path associated to it and display it but it was in vain:

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

I am new to php and have managed to do this piece of code

Any help will be appreciated

Sorry for my bad english

Thanks & Regards
Akki2401

Answer 1

I am not sure what you are asking but i feel this is what you are looking for! try this!

<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>

and Css

.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
}

try fiddle here http://jsfiddle.net/raghuchandrasorab/qzjddx6v/