选中图片同时选中对应的radio按钮

Yeonho5234 2017-06-13 03:21:31



<div class="color" style="margin-left:470px;margin-top:50px;">

        	<input type="radio" id="gold" name="color" value="gold" style="margin-left:10px;display:none"><img onclick="myFun(this.id)" name="img" id="gold" src="images/Buy_Page/iPad_select/gold.png" style="margin-left:0px;;width:235px;height:278px;" />

            <input type="radio" id="silver" name="color" value="silver" style="margin-left:10px;display:none"><img  name="img" id="silver" src="images/Buy_Page/iPad_select/silver.png" onclick="myFun(this.id)" style="margin-left:10px;width:235px;height:278px;" />

            <input type="radio" id="gray" name="color" value="gray" style="margin-left:10px;display:none"><img onclick="myFun(this.id)" name="img" id="gray" src="images/Buy_Page/iPad_select/gray.png" style="margin-left:10px;width:235px;height:278px;" /><br/>

            <font style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#999999;margin-left:100px;">金色</font>

            <font style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#999999;margin-left:210px;">银色</font>

            <font style="font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#999999;margin-left:205px;">深空灰色</font>          

        </div>



function myFun(sId) {

    var oImg = document.getElementsByName('img');



    for (var i = 0; i < oImg.length; i++) {

      if (oImg[i].id == sId) {

        oImg[i].previousSibling.previousSibling.checked = true;

        oImg[i].style.border = '2px solid #08C';

      } else {

        oImg[i].style.border = '2px solid #FFFFFF';



      }

    }

  }