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

它显示一个下拉菜单，而我需要它显示单选按钮。
我正在尝试一种解决方法，但这并不是很干净。

我需要在以下代码上进行哪些更改以具有单选按钮而不是下拉菜单

谢谢你的帮助，

解决方法如下：
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>

最佳答案

将html更改为此

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

将此collFilters.change(function() {更改为此collFilters.click(function() {