Change jquery filter dropdown list to check boxes

Question

I am making a website that talks about fruits and their prices.
I have the code to make drop down list, which selects one option and then narrows it down when the option is clicked then there is another option which narrows it down even more. This works like a charm, but I I don't want a drop down box, I want check boxes.

Here is the code:

<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>

I have tried changing the html and jquery but when I try to filter things out it doesn't work at all

<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();
    }
});​

what should I change?