To Combine an onclick JavaScript code with Radio Label Section Link

New Member
3 0 0

Goal: To have the main product image change to a specific color each time a radio button and its accompanying words are selected.

Problem: Each time I set the link to change its color, it won't select the radio button of the new color. In contrast, if I set it so the radio buttons are selectable upon clicking, the color will not change. In short, I want to combine both the onclick JavaScript code for changing the color and the radio label selection link together so that they both work simultaneously.

My HEAD section:

<script type="text/javascript">
 function swap(image) {
  document.getElementById("largethumb").src = image.href;


My BODY code:

<ul id="variants">
 {% for variant in product.variants %}
 <li id="listitem_{{}}">
 {% if variant.available == true %}
 <input type="radio" name="id" value="{{}}" id="radio_{{}}" {%if forloop.first%} checked="checked" {%endif%} />
  <label for="radio_{{}}">
  <a href="{{}}.png" onclick="swap(this); return false;">
<div id="colorchange"></div></a> {{ variant.title }} </label> {% else %} <span>Sold Out! - {{ variant.title }}</span> {% endif %} </li> {% endfor %} </ul>



Here is a screenshot for further visual aid:

(As you can see, clicking the color swatch thumbnail changes the color, while the actual section is does not change unless you click on the words/label. I'd like to combine these two links.)

For an even closer look, here is my store and visitor password:

(To view: whewle)