cdoweb Member
August 01, 2012

To Combine an onclick JavaScript code with Radio Label Section Link This post is outdated

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_{{variant.id}}">
 {% if variant.available == true %}
 <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} />
  <label for="radio_{{variant.id}}">
  <a href="http://cdn.shopify.com/s/files/1/0171/5038/files/{{variant.id}}.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: http://postimage.org/image/lpl7vl8gl/

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