0

次のラジオ ボタンを使用して、一連の項目をフィルタリングしています。

<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 のアイテムを見たいと思います。

何か案は？

4

1 に答える 1

0

次のように、checked 属性を使用します。

<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
于 2013-07-19T17:12:43.473 に答える