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

时间：2016-02-19 09:16:26

标签： javascript jquery html

我正在尝试获取表行，以显示单元格中的值与两组无线电复选框（已经正常工作）中的选项匹配。

但我现在想在'term'单元格中的单元格（即30,60和90）中写入多个值。如果在无线电组“术语”中选择30,60或90，则无线电输入应显示此行，只要“数量”无线电选择匹配即可。这将同时工作，因此两个集合可以有多个选项。 （即，当两个无线电设备至少匹配一个时，一行将显示多个'金额'值和多个'术语'值。）

<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
}];

1 个答案:

答案 0 :(得分：1)

如果将terms和amounts转换为数组，则应首先声明它们，然后在过滤器函数中，您需要执行一个＆＃39; sub＆＃39; -filter来计算实际比赛。

我已根据我的想法调整了你的例子并使其成功。

＆＃13;
＆＃13; 
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();
  });
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果您的逻辑需要仅显示实际匹配值，我将更改过滤逻辑以首先映射新值，然后对这些值进行过滤 例如

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

我created a fiddle on what I would really do，这还包括mapping，并减少了比较所需的逻辑数量，因为示例使用了单选按钮（＆＃34;只能有一个＆ ＃34;已选中），因此为它创建一个数组是没用的。除非您切换到checkbox元素，否则您必须使用数组。

到目前为止，您可能已经或可能没有注意到我也触及了您的HTML示例，原因如下：

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

id值不能以数字开头（因此它不能是数字），对于演示的用例，通过长度来应用引用是多余的，同时简单地嵌入{{1在<input>内部，享受它提供的相同交互机制。 （对我来说）不使用此方法的唯一原因是当<label>不在<label>附近时，我会将它们与<input> / {{1}相关联}。

最后一些想法我的（小）改为id。

你可能已经注意到我写的for逻辑略有不同。 indexOf代替indexOf是个人偏好，两者都做同样的事情。我喜欢将>= 0视为＆＃34;它是否在数组中？＆＃34; ，而!== -1（对我来说）读为＆＃ 34;它不在数组中吗？＆＃34; 。 我还确保我与字符串值（>= 0）进行比较，我这样做是因为它允许我确保类型匹配（从HTML属性获得的任何值是（DOM）字符串）同时提供在!== -1中尽可能方便地定义它们的选项（数字往往比字符串短2个字符）。

相关问题
最新问题