jquery - jqueryフィルターのドロップダウンリストをチェックボックスに変更

Question

果物とその価格について語るウェブサイトを作っています。
ドロップダウンリストを作成するコードがあります。これは、1つのオプションを選択し、オプションをクリックすると絞り込み、さらに絞り込む別のオプションがあります。これは魅力のように機能しますが、ドロップダウン ボックスは必要ありません。チェック ボックスが必要です。

コードは次のとおりです。

<select id="fruit" class="friltro">
    <option value="all">All fruits</option>
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="pineapple">pineapple</option>
</select>
<select id="price" class="friltro">
    <option value="all">All prices</option>
    <option value="1">$1</option>
    <option value="3">$3</option>
    <option value="4">$4</option>
</select>

HTMLとjqueryを変更しようとしましたが、フィルタリングしようとするとまったく機能しません

<input type="checkbox" id="price" value="all" class="filtro" >
<label for="filrtro" >all</label>
<input type="checkbox" id="price" value="apple" class="filtro" >
<label for="filrtro" >apple</label>

$('.friltro').change(function () {
    var criteria = '';
    var showAll = true;
    $('.friltro').each(function () {
        var val = $(this).children(':selected').val();
        if (val !== 'all') {
            criteria += '.' + $(this).attr('id') + '-' + val;
            showAll = false;
        }
    });
    if (showAll) {
        $('.item').show();
    } else {
        $('.item').hide();
        $(criteria).show();
    }
});​

何を変更すればよいですか？