如何将此代码从下拉菜单更改为单选按钮

Question

It displays a drop down and I need it to display radio buttons instead. Im playing around with a workaround, but it´s not really clean.

What does I have to change on the following code to have radio buttons instead of a dropdown menu

Thanks for any help,

Here is the workaround: http://jsfiddle.net/a31p2371/16/

 <script> Shopify.queryParams = {}; if (location.search.length) { for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) { aKeyValue = aCouples[i].split('='); if (aKeyValue.length > 1) { Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]); } } } jQuery('.coll-picker').change(function() { if (jQuery(this).val()) { location.href = '/collections/' + jQuery(this).val(); } else { location.href = '/collections/all'; } }); var collFilters = jQuery('.coll-filter'); collFilters.change(function() { delete Shopify.queryParams.page; var newTags = []; collFilters.each(function() { if (jQuery(this).val()) { newTags.push(jQuery(this).val()); } }); {% if collection.handle %} var newURL = '/collections/{{ collection.handle }}'; if (newTags.length) { newURL += '/' + newTags.join('+'); } var search = jQuery.param(Shopify.queryParams); if (search.length) { newURL += '?' + search; } location.href = newURL; {% else %} if (newTags.length) { Shopify.queryParams.constraint = newTags.join('+'); } else { delete Shopify.queryParams.constraint; } location.search = jQuery.param(Shopify.queryParams); {% endif %} }); </script> 

 <ul class="clearfix filters"> <li class="clearfix filter"> {% assign tags = 'Kaschiert, Chromokarton, Recyclingkarton, Kunststoff' | split: ',' %} <label>Material</label> <select class="coll-filter"> <option value="">All</option> {% for t in tags %} {% assign tag = t | strip %} {% if current_tags contains tag %} <option value="{{ tag | handle }}" selected>{{ tag }}</option> {% elsif collection.all_tags contains tag %} <option value="{{ tag | handle }}">{{ tag }}</option> {% endif %} {% endfor %} </select> </li> </ul> 

Answer 1

Change html to this

  <ul class="clearfix filters">
      <li class="clearfix filter">
        {% assign tags = 'Kaschiert, Chromokarton, Recyclingkarton, Kunststoff' | split: ',' %}


          <input type="radio" name="coll-filter" value="">All>
          {% for t in tags %}
          {% assign tag = t | strip %}
          {% if current_tags contains tag %}
          <input type="radio" name="coll-filter" value="{{ tag | handle }}" selected>{{ tag }}
          {% elsif collection.all_tags contains tag %}
          <input type="radio" name="coll-filter" value="{{ tag | handle }}">{{ tag }}
          {% endif %}
          {% endfor %}
        </select>
      </li>

    </ul>

change this collFilters.change(function() { to this collFilters.click(function() {