vendredi 25 septembre 2015

checkbox logic not working correctly

I have the following form, with several checkboxes. Each set of checkboxes works fine, but when you change an input in the other set of checkboxes, it no longer filters based on the first set (and vice versa).

I need the logic from each set to crossover, and not sure how to achieve that?

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").parent().hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
  $("#fee :checkbox").click(function() {
    $("td").parent().hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
});
var repayment = function() {

};
window.onload = function() {
  document.repaymentcalc.homevalue.onchange = repayment;
  document.repaymentcalc.loanamount.onchange = repayment;
  document.repaymentcalc.numberpayments.onchange = function() {
    $('#years').html(this.value + ' years');
  };
  makeSomething();
};

function makeSomething() {
  $('tbody tr').each(function(idx, row) {
    var $row = $(row);
    var initialRateCell = $row.find('td')[2];
    var repaymentCell = $row.find('td').last()
    var rate = parseFloat($(initialRateCell).html());
    var repaymentVal = computeRepayment(rate);
    $(repaymentCell).html(repaymentVal.repayment);
  });
}
$("#myForm :input").change(function() {
  makeSomething();
});

function computeRepayment(rate) {
  var x = parseInt(document.repaymentcalc.loanamount.value, 10);
  var y = parseInt(rate * 100, 10) / 120000;
  var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
  var h = parseInt(document.repaymentcalc.homevalue.value, 10);

  var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

  var loantovalue = x / h * 100;

  var year = z / 12;
  return {
    repayment: repayment.toFixed(2),
    loantovalue: loantovalue,
    year: year
  }
}
<script src="http://ift.tt/1qRgvOJ"></script>
<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
  <br>
  <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
  <br>
  <input type="checkbox" name="type" value="t9" id="t9" />Tracker
  <br>
  <input type="checkbox" name="type" value="t1" id="t1" checked/>All
  <br>
</section>

<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f2" id="f2" />Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f1" id="f1" checked/>All
  <br>
</section>

<form name="repaymentcalc" id="myForm" action="">
  </br>
  <p>
    Home Value £
    <input type="number" id="homevalue" value="250000" style="width: 75px">
  </p>

  <p>
    Loan Amount £
    <input type="number" id="loanamount" value="200000" style="width: 75px">
  </p>

  Term
  <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">

  <div id="years" style="display:inline-block;">25 years</div>

  <p>

    <div id="ltv">Loan to Value: 80.0%</div>

    </div>
</form>

<br>

<div id="mortgagediv">
  <table id="mortgagetable">
    <thead>
      <tr class="productheader">
        <th class="lender">Lender</th>
        <th class="type">Type</th>
        <th class="inititalrate">Initial Rate (%)</th>
        <th class="svr">SVR (%)</th>
        <th class="apr">Overall APR (%)</th>
        <th class="fee">Fee (£)</th>
        <th class="ltv">LTV (%)</th>
        <th class="repayment">Monthly Repayment (£)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
    </tbody>
  </table>
</div>



Aucun commentaire:

Enregistrer un commentaire