Want to change variant automatically when click on variant image

[aaqibalighuman]

I want to change the variant when clicking on the variant image I have found the solution but its only works in select and option but in my theme, I am using input type radio button instead of the select option button.

------------------------------------------Here is my code for the variant-----------------------------------------------------------

<!-- productOption.liquid -->
{%- if section.settings.product_selector == 'radio' -%}
{%- assign isColor = false -%}
{%- assign optionName = option.name | handleize -%}
{%- if optionName contains 'colo' -%}
{%- assign isColor = true -%}
{%- endif -%}
<fieldset class="single-option-radio"
name="{{ option.name | handleize }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{%- assign option_index = forloop.index -%}
{%- for value in option.values -%}
{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}
{%- for variant in product.variants %}
{%- assign vOption = 'option' | append: option_index -%}
{%- if value == variant[vOption] -%}
{%- assign currenVariant = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- assign hasImage = false -%}
{%- if isColor and currenVariant.image -%}
{%- assign hasImage = true -%}
{%- endif -%}
<input type="radio"
{%- if option.selected_value == value -%} checked="checked"{%- endif -%}
{%- unless variant_label_state -%} disabled="disabled"{%- endunless -%}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name | handleize }}"
class="single-option-selector-{{ section.id }} single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label {% if hasImage %}data-tooltip="true" title="{{ value | escape }}" style="background-image:url({{currenVariant.image.src | img_url:'100x'}})"{% endif %}
for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>
{%- unless hasImage -%}{{ value | escape }}{%- endunless -%}
</label>
{%- endfor -%}
</fieldset>
{%- else -%}
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
data-index="option{{ forloop.index }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{%- endfor -%}
</select>
{%- endif -%}

---------------------------------------------------Variant Code Ended-----------------------------------------------------------

-----------------------------------------------------------here is the js to change variants---------------------------------------------------

https://help.shopify.com/en/manual/online-store/themes/os/customize/select-variants-click----------------------------------------------------------------------------------------------------


Thanks In Advance if someone helps me to resolve this issue.

[IttantaTech]

@aaqibalighuman 

Can you please provide store URL ?

[aaqibalighuman]

actually, I am working on a copy and don't want to make it publish . You can see the Brooklyn theme variant style it is the same as my store. Waiting for Your response