具有多个值的单选按钮逻辑

Question

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

But I now want to write multiple values in a cell (ie 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. (ie one row will show for multiple 'amounts' values and multiple 'term' values when both radio sets match at least one from each).

 <script> 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 && terms.indexOf("30") != -1 ) || ( item.term == 60 && terms.indexOf("60") != -1 ) || ( item.term == 90 && terms.indexOf("90") != -1 ) || ( item.term == 180 && terms.indexOf("180") != -1 ) || ( item.term == 360 && terms.indexOf("360") != -1 ) ); }); var rows = ""; for (var i = 0; i < l.length; i++) { rows += "<tr><td>" + l[i].name + "</td><td>" + l[i].amount + "</td><td>" + ((l[i].term > 0) ? l[i].term : "None") + "</td></tr>"; } $("#lenders").html(rows); } $(function(){ renderLenders(); $("input[type=radio]").on("click", function(){ renderLenders(); }); }) </script> 

 <input id="100" type="radio" name="amount" value="100" checked /> <label for="100"><b>&#163;100</b></label> <input id="250" type="radio" name="amount" value="250" /> <label for="250"><b>&#163;250</b></label> <input id="500" type="radio" name="amount" value="500" /> <label for="500"><b>&#163;500</b></label> <input id="1000" type="radio" name="amount" value="1000" /> <label for="1000"><b>&#163;1,000</b></label> <input id="1500" type="radio" name="amount" value="1500" /> <label for="1500"><b>&#163;1,500</b></label> <input id="30" type="radio" name="term" value="30" checked /> <label for="30"><b>30 days</b></label> <input id="60" type="radio" name="term" value="60" /> <label for="60"><b>60 days</b></label> <input id="90" type="radio" name="term" value="90" /> <label for="90"><b>3 mths</b></label> <input id="180" type="radio" name="term" value="180" /> <label for="180"><b>6 mths</b></label> <input id="360" type="radio" name="term" value="360" /> <label for="360"><b>12 mths</b></label> <table> <tbody id='lenders'></tbody> </table> <script type="text/javascript"> 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 }]; 

Answer 1

If the terms and amounts are turned into arrays, you should first declare them and then in your filter functions, you need to perform a 'sub'-filter to figure out the actual match.

I have adapted your example to what I think you ask and made this work.

 var lenders = [{ name: "Bank 1", amount: ["100"], term: [30, 60] }, { name: "Bank 2", amount: ["250"], term: [60] }, { name: "Bank 3", amount: ["100", "250"], term: [30] }, { name: "Bank 4", amount: ["100"], term: [60] }, { name: "Bank 5", amount: ["250"], term: [30] }, { name: "Bank 6", amount: ["100", "250"], term: [30, 180] } ]; 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 item.amount.filter(function(a) { return amounts.indexOf('' + a) >= 0; }).length; }) .filter(function(item, index, array) { return item.term.filter(function(t) { return terms.indexOf('' + t) >= 0; }).length; }); var rows = ""; for (var i = 0; i < l.length; i++) { rows += "<tr><td>" + l[i].name + "</td><td>" + l[i].amount + "</td><td>" + ((l[i].term > 0) ? l[i].term : "None") + "</td></tr>"; } $("#lenders").html(rows); } $(function() { renderLenders(); $("input[type=radio]").on("click", function() { renderLenders(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="radio" name="amount" value="100" checked /> <b>&#163;100</b> </label> <label> <input type="radio" name="amount" value="250" /> <b>&#163;250</b> </label> <label> <input type="radio" name="term" value="30" checked /> <b>30 days</b> </label> <label> <input type="radio" name="term" value="60" /> <b>60 days</b> </label> <table> <tbody id='lenders'></tbody> </table> 

If your logic requires to show only the actual matching values, I'd change the filtering logic to first map the new values and then filter on these For example

var l = lenders
  .map(function(item) {
    return {
      name: item.name,
      amount: item.amount.filter(function(v) {
        return amounts.indexOf('' + v) >= 0;
      }),
      terms: item.term.filter(function(v) {
        return terms.indexOf('' + v) >= 0;
      })
    };
  })
  .filter(function(item) {
    return item.amount.length && item.terms.length;
  });

I've created a fiddle on what I would really do , this also includes the mapping and reduces the amount of logic required to compare as the example makes use of radio buttons ("there can only be one" selected), so it is useless to create an array for it. Unless you're switching to checkbox elements, then you must resort to the use of arrays.

By now you may or may not have noticed I also touched your HTML example, here's why:

<input id="100" .. /><label for="100">..</label>

An id value cannot start with a number (so it cannot be a number), and for the demonstrated use case, it is redundant to go through lengths to apply references while it is just as easy to simply embed the <input> inside the <label> and enjoy the same interaction mechanics it offers. The only reason (for me) to not use this approach is when the <label> is not anywhere near the <input> , then I'd link them with id / for .

Some final thoughts my (small) change to indexOf .

You may have noticed I write the indexOf logic slightly different. The >= 0 instead of !== -1 is a personal preference, both do the same thing. I like to think of >= 0 as "is it in the array?" , while !== -1 (to me) reads as "is it not not in the array?" . I have also made sure I'm comparing to the string values ( indexOf('' + t) ), I do this because it allows me to ensure the types match (any value obtained from HTML-attributes is a (DOM)String) whilst providing the option to define them in the lenders as convenient as possible (numbers tend to be 2 characters shorter than strings).