如何在 Shopify 上默认选择输入列表的第一个单选按钮选项？

Question

我正在创建一个 Shopify 主题，其中产品选项由单选按钮而不是下拉选择组成。例如，产品颜色选项的代码是：

{% for value in option.values %}
  {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
  <input class="variant-radio" id="{{ radio_id }}" type="radio" name="{{ option_name }}" value="{{ value }}" {% if value == selected %}checked{% endif %}>
  <label for="{{ radio_id }}">
    {{ value }}
  </label>
{% endfor %}

如何将第一个选项设置为默认选择的颜色？如果我删除 checked 周围的 {% if value == selected %} 和 {% endif %}，它只会将最后一个选项设置为默认选择。

Answer 1

您可以省略 if value == selected 代码并使用 jquery:

$("input[type=radio].variant-radio:first").attr('checked', true);

Answer 2

您可以使用 {% forloop.index %} 从 "for" 循环中获取循环的当前 index。

所以你可以使用类似的东西：

{% for value in option.values %}
  ...
  <input type="radio"{% if forloop.index == 1 %} checked="checked"{% endif %}>
  ...
{% endfor %}

如何在 Shopify 上默认选择输入列表的第一个单选按钮选项？

How do I make the first radio button option of a list of inputs selected by default on Shopify?

html

javascript

jquery

liquid

shopify