如何將此代碼從下拉菜單更改爲單選按鈕

Question

它顯示一個下拉菜單，我需要它來顯示單選按鈕。 我正在玩一個解決方法，但它不是很乾淨。

什麼我必須改變對下面的代碼有單選按鈕，而不是一個下拉菜單的

感謝您的幫助，

下面是解決方法： 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

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