select - 选择函数中的第一个单选按钮

Question

我正在使用以下单选按钮来过滤一系列项目：

<label>Numbers</label><br/>
<input type="radio" name="number" value="1">1<br/>
<input type="radio" name="number" value="2">2<br/>
<label>Letters</label><br/>
<input type="radio" name="letter" value="a">a<br/>
<input type="radio" name="letter" value="b">b

项目标记如下所示：

<ul class="all-options">
    <li class="1 a">
         <h3>Price</h3>
         <h2>$1000</h2>
    </li>
    <li class="1 b">
         <h3>Price</h3>
         <h2>$1500</h2>
    </li>
    <li class="2 a">
         <h3>Price</h3>
         <h2>$1200</h2>
    </li>
    <li class="2 b">
         <h3>Price</h3>
         <h2>$1300</h2>
    </li>
</ul>

我正在使用此功能根据更改事件进行过滤：

$(function () {
    $('input[type="radio"]').on('change', function () {
        var number = $("[name='number']:checked").val();
        var letter = $("[name='letter']:checked").val();
        $("li").hide();
        $("li").filter(function (index) {
        return $(this).hasClass(number) && $(this).hasClass(letter);
        }).show();
    });
});

除了一件事之外，这一切都很好：我希望在加载页面时自动选择每个类别（数字和字母）中的第一个单选按钮。而且，我希望这些选择反映在过滤器中。因此，在这种情况下，例如，在页面加载时，我希望看到具有 1 和 a 类的项目。

有任何想法吗？

Answer 1

使用选中的属性，如下所示：

<label>Numbers</label><br/>
<input type="radio" name="number" value="1" checked>1<br/>
<input type="radio" name="number" value="2">2<br/>
<label>Letters</label><br/>
<input type="radio" name="letter" value="a" checked>a<br/>
<input type="radio" name="letter" value="b">b