javascript - 如何使用 twig 在使用 for in 循环构建的列表中默认选择第一个单选按钮？

Question

我正在使用 twig 制作带有数据库值的单选按钮列表。类似于:

{% for usermembershiptype in usermembershiptypes %}
    <div class="ms_type noline">
        <p>{{ usermembershiptype.description}}</p>
        <label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span><input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/></label>
        <div class="clearfix"></div>
    </div>
{% endfor %}

我希望默认选择第一个单选按钮，但是当使用 for in 循环时，我不确定如何引用第一个单选按钮。

有什么建议吗？ Javascript 和 Jquery 解决方案也受欢迎。

Answer 1

您可以使用loop.index和 if condition喜欢

{% for usermembershiptype in usermembershiptypes %}
    <div class="ms_type noline">
        <p>{{ usermembershiptype.description}}</p>
        <label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span>
            {% if loop.index == 1 %}
                <input name="membership-type" type="radio" value="{{ usermembershiptype.id }}" checked/>
            {% else %}
                <input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/>
            {% endif %}
        </label>
        <div class="clearfix"></div>
    </div>
{% endfor %}

注意:未经测试

<小时/>

使用loop.first

{% for usermembershiptype in usermembershiptypes %}
    <div class="ms_type noline">
        <p>{{ usermembershiptype.description}}</p>
        <label class="ms_price ms_odd">${{ usermembershiptype.price }}<span>/year</span>
            {% if loop.first %}
                <input name="membership-type" type="radio" value="{{ usermembershiptype.id }}" checked/>
            {% else %}
                <input name="membership-type" type="radio" value="{{ usermembershiptype.id }}"/>
            {% endif %}
        </label>
        <div class="clearfix"></div>
    </div>
{% endfor %}