title: Radio button logic with multiple values
body: <p>I am trying to get table rows to show when the values in the cells match selctions made in two groups of radio checkboxes (already working).</p>
  
  <p>But I now want to write multiple values in a cell (i.e. 30, 60 and 90) in the 'term' cells. The radio input should then show this row if 30, 60 or 90 is selected in the radio group 'term' so long as the 'amount' radio selection matches. This will work both ways, so there can be multiple options for both sets. (i.e. one row will show for multiple 'amounts' values and multiple 'term' values when both radio sets match at least one from each).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    
    function renderLenders() {
    var amounts = $("input[name=amount]:checked").map(function() {
      return $(this).val();
    }).get();
    var terms = $("input[name=term]:checked").map(function() {
      return $(this).val();
    }).get();
  
    var l = lenders.filter(function(item, index, array) {
      return amounts.indexOf(item.amount) != -1;
    });
  
    l = l.filter(function(item, index, array) {
      return (
        (
          item.term == 30 &amp;&amp;
          terms.indexOf("30") != -1
        ) ||
        (
          item.term == 60 &amp;&amp;
          terms.indexOf("60") != -1
        ) ||
        (
          item.term == 90 &amp;&amp;
          terms.indexOf("90") != -1
        ) ||
        (
          item.term == 180 &amp;&amp;
          terms.indexOf("180") != -1
        ) ||
        (
          item.term == 360 &amp;&amp;
          terms.indexOf("360") != -1
        )
      );
    });
  
    var rows = "";
    for (var i = 0; i &lt; l.length; i++) {
      rows += "&lt;tr&gt;&lt;td&gt;" + l[i].name + "&lt;/td&gt;&lt;td&gt;" + l[i].amount + "&lt;/td&gt;&lt;td&gt;" + ((l[i].term &gt; 0) ? l[i].term : "None") + "&lt;/td&gt;&lt;/tr&gt;";
    }
    $("#lenders").html(rows);
  }
  $(function(){
    renderLenders();
    $("input[type=radio]").on("click", function(){
      renderLenders();
    });
  })
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="100" type="radio" name="amount" value="100" checked /&gt;
  &lt;label for="100"&gt;&lt;b&gt;&amp;#163;100&lt;/b&gt;&lt;/label&gt;
  &lt;input id="250" type="radio" name="amount" value="250" /&gt;
  &lt;label for="250"&gt;&lt;b&gt;&amp;#163;250&lt;/b&gt;&lt;/label&gt;
  &lt;input id="500" type="radio" name="amount" value="500" /&gt;
  &lt;label for="500"&gt;&lt;b&gt;&amp;#163;500&lt;/b&gt;&lt;/label&gt;
  &lt;input id="1000" type="radio" name="amount" value="1000" /&gt;
  &lt;label for="1000"&gt;&lt;b&gt;&amp;#163;1,000&lt;/b&gt;&lt;/label&gt;
  &lt;input id="1500" type="radio" name="amount" value="1500" /&gt;
  &lt;label for="1500"&gt;&lt;b&gt;&amp;#163;1,500&lt;/b&gt;&lt;/label&gt;
  
  &lt;input id="30" type="radio" name="term" value="30" checked /&gt;
  &lt;label for="30"&gt;&lt;b&gt;30 days&lt;/b&gt;&lt;/label&gt;
  &lt;input id="60" type="radio" name="term" value="60" /&gt;
  &lt;label for="60"&gt;&lt;b&gt;60 days&lt;/b&gt;&lt;/label&gt;
  &lt;input id="90" type="radio" name="term" value="90" /&gt;
  &lt;label for="90"&gt;&lt;b&gt;3 mths&lt;/b&gt;&lt;/label&gt;
  &lt;input id="180" type="radio" name="term" value="180" /&gt;
  &lt;label for="180"&gt;&lt;b&gt;6 mths&lt;/b&gt;&lt;/label&gt;
  &lt;input id="360" type="radio" name="term" value="360" /&gt;
  &lt;label for="360"&gt;&lt;b&gt;12 mths&lt;/b&gt;&lt;/label&gt;
  
  &lt;table&gt;
    &lt;tbody id='lenders'&gt;&lt;/tbody&gt;
  &lt;/table&gt;
      &lt;script type="text/javascript"&gt;
          var lenders = [{
    name: "Bank 1",
    amount: "100",
    term: 30
  }, {
    name: "Bank 2",
    amount: "100",
    term: 60
  }, {
    name: "Bank 3",
    amount: "100",
    term: 90
  }, {
    name: "Bank 4",
    amount: "100",
    term: 180
  }, {
    name: "Bank 5",
    amount: "100",
    term: 360
  }, {
    name: "Bank 6",
    amount: "250",
    term: 30
  }, {
    name: "Bank 7",
    amount: "250",
    term: 60
  }, {
    name: "Bank 8",
    amount: "500",
    term: 360
  }, {
    name: "Bank 9",
    amount: "1000",
    term: 30
  }, {
    name: "Bank 10",
    amount: "1500",
    term: 60
  }];</code></pre>
  </div>
  </div>
  </p>