Filtering a list with radio buttons

Question

I'm currently trying to sort between a list of 2 items based on their thickness "3mm" and "5mm".

I want for when you click the radio button for 3mm to automatically filter the list for items with the class of 3mm, and the same for 5mm. Then if you click "no preference" I want it to remove any filter based on thickness.

I've been messing around with it for a while now, trying to piece together code, but to no avail, any help would be really appreciated! Thanks!

JSFiddle also: http://jsfiddle.net/gdkmrqnr/

HTML:

<div id="container">
  <div class="page">
    <div>
      <h1>piece-y search</h1>
    </div>

    <div id="main">


      <div class="c1">
        <h2>piece search</h2>
        <div id="piece-search">

            <ul class="sort-by">

            <li>
            <input class="search" placeholder="Search pieces" />
            </li>
            <li class="sort btn" data-sort="type">Sort by type</li>
            <li class="sort btn" data-sort="thickness">Sort by thickness</li>
            <li class="sort btn" data-sort="height">Sort by height</li>
            <li class="sort btn" data-sort="category">Sort by style</li>
          </ul>

          <ul class="filter">
             <li>
                <select name="material" id="filter-material">
                <option selected="selected" value="">Select a Material</option>
                <option value="plastic">Plastic</option>
                <option value="glass">Glass</option>
                </select>
            </li>
             <li>
           <input type="radio" name="thickness" value="none" checked>No Preference
           </li>
           <li>
           <input type="radio" name="thickness" value="3mm">3mm
           </li>
           <li>
           <input type="radio" name="thickness" value="5mm">5mm
           </li>
            <li class="btn" id="filter-none">Show all</li>
            <li class="btn" id="filter-scientific" value="category">Only show scientific glass</li>
            <li class="btn" id="filter-artsy" value="category">Only show artsy glass</li>
          </ul>

          <ul class="list">
            <li class="item">
                    <p class="sorting-info hide-this">
                    <p class="material">plastic</p>
                    <p class="type">pipe</p>
                    <p class="thickness">3mm</p>
                    <p class="height">15inch+</p>
                    <p class="category">artsy</p>
                     </p>
                </li>

                <li class="item">
                    <p class="sorting-info hide-this">
                    <p class="material">glass</p>
                    <p class="type">bowl</p>
                    <p class="thickness">3mm</p>
                    <p class="height">14inch-</p>
                    <p class="category">scientific</p>
                     </p>
                </li>
    </ul>
  </div>
</div>
</div>

</div> <!-- end of #container -->

JS

// radio button to select thickness
$("input[type='radio']").change(function () {
    var number = $("[name='thickness']:checked").val();
    var letter = $("[name='thickness']:checked").val();

    if (!thickness || !thickness) return;
    $("li").hide();
    $("li").filter(function (index) {
        return $(this).hasClass(thickness) && $(this).hasClass(letter);
    }).show();
});

Answer 1

You can filter your list items by the text of the thickness like this:

$("input[type='radio']").change(function () {
    var number = $("[name='thickness']:checked").val();
    //var letter = $("[name='thickness']:checked").val();

    //if (!thickness || !thickness) return;
    var $items = $(".list .item");
    if (number === "none") {
        $items.show();
    } else {
        $items.hide();
        $items.filter(function (index) {
            return $(this).find('.thickness').text() === number;
        }).show();
    }
});

I tried to keep as much as possible your code structure. See your code refactored.

Answer 2

Okay, after reviewing my code, I seemed to have stepped over this option with the above html in play:

having this as JS will sort the list on select, it just won't show the box checked, if anyone knows how to fix that, I'd appreciate it!

JS

// radio button to select thickness
$('#filter-3mm').click(function() {
  featureList.filter(function(item) {
    if (item.values().thickness == "3mm") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});