复选框逻辑无法正常工作

时间：2015-09-25 13:25:39

标签： javascript jquery checkbox

我有以下表格，有几个复选框。每组复选框都可以正常工作，但是当您更改另一组复选框中的输入时，它不再基于第一组进行过滤（反之亦然）。

我需要每组的逻辑交叉，而不知道如何实现这一点？

＆＃13;
＆＃13; 
$(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
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

我将两组逻辑合并为一个回调。它不优雅也不高效，但有效。

package com.stackoverflow;

import org.openqa.selenium.By;
import org.testng.Assert;
import org.testng.annotations.Test;

import com.services.Init;

public class Issue3 extends Init {

    @Test
    public void solutionOfIssue() throws InterruptedException {

        /*
         * The best thing is to first assert & verify that, that particular
         * element is present or not. if you see function
         * assertAndVerifyElement() --- it continuously checks for element for 5
         * secs and then assert it accordingly.
         */

        assertAndVerifyElement(By.cssSelector("button.btn.btn-default"));
        getWebDriver().findElement(By.cssSelector("button.btn.btn-default")).click();

        assertAndVerifyElement(By.xpath("//div[@id='content']/div/form"));
        getWebDriver().findElement(By.xpath("//div[@id='content']/div/form")).click();

        assertAndVerifyElement(By.linkText("Order"));
        getWebDriver().findElement(By.linkText("Order")).click();

    }

    public void assertAndVerifyElement(By element) throws InterruptedException {
        boolean isPresent = false;

        for (int i = 0; i < 5; i++) {
            try {
                if (getWebDriver().findElement(element) != null) {
                    isPresent = true;
                    break;
                }
            } catch (Exception e) {
                // System.out.println(e.getLocalizedMessage());
                Thread.sleep(1000);
            }
        }
        Assert.assertTrue(isPresent, "\"" + element + "\" is not present.");
    }

}

以下是demo。

答案 1 :(得分：0)

您只有 myform 区域的事件处理程序

$("#myForm :input").change(function() {
  makeSomething();
});

但费用和类型部分不在表单之内，他们的更改事件永远不会是cauth。因此，您需要在 myform 表单中移动 type 和费用部分，以便在$（“＃myForm：input”中选择它们“）或为复选框添加另一个事件处理程序。

$("#fee :checkbox").change(function() {
    makeSomething();
});

$("#type :checkbox").change(function() {
    makeSomething();
});

看看这个小提琴 https://jsfiddle.net/bocanegra_carlos/obcux0d8/

答案 2 :(得分：0)

基本上，我认为当你阅读复选框时，你的功能应该回到绘图板上。它可以大规模简化，或至少通过这样做可以理解：

// Store all active classes in this variable
var allActive = [];
// Run this function anytime something changes
function activateClasses(){
    // Create a string that jquery can use to search for all the children
    var activeClassesString = '.' + allActive.join(', .');
    // Instead of looking through _all_ the td elements,
    // only look through the parent and search in them.
    $('tbody tr').each(function(){
      var data = $(this);
      // instead of hiding all before, just hide when it finds
      // no children with the classes you want
      if(allActive.length && !data.find(activeClassesString).length) 
          data.hide();
      // otherwise, show
      else 
          data.show();
    });
}

// When your checkbox changes, add the value of it either to the 
// array of classes you want to sort, or remove it from the array
$('input[type="checkbox"]').change(function(){
    var value = $(this).val();
    var index = allActive.indexOf(value);
    var checked = $(this).is(':checked');
    if(!checked && index > -1)
       allActive = allActive.slice(index, 1);
    else if(checked && index === -1)
        allActive.push(value);
    activateClasses();
});

＆＃13;
＆＃13; 
$(document).ready(function() {
  
  var allActive = [];
  function activateClasses(){
    var activeClassesString = '.' + allActive.join(', .');
    $('tbody tr').each(function(){
      var data = $(this);
      if(allActive.length && !data.find(activeClassesString).length) data.hide();
      else data.show();
    });
  }
  
  $('input[type="checkbox"]').change(function(){
    var value = $(this).val();
    var index = allActive.indexOf(value);
    var checked = $(this).is(':checked');
    if(!checked && index > -1)
       allActive = allActive.slice(index, 1);
    else if(checked && index === -1)
        allActive.push(value);
    activateClasses();
  });
  
});
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
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
＆＃13;
＆＃13;
＆＃13;

更好地利用变量，因为代码非常繁重。例如，不是让jQuery每次都编译文档中所有td的列表，而是将其分配给全局变量。如果应动态添加td，则仅在添加新全局变量时更新此全局变量。这意味着jQuery对象已经存在，并且没有时间重新编译它，从而加快了代码的速度。目前没有什么区别，但一旦你的名单变得足够长，你会感到有些放缓。我也很确定课程可能不是你最好的选择。也许data-属性更适合，因此您的tr看起来像这样：

<tr data-lender="nationwide" data-type="2-years-fixed" data-rate="1.64" data-svr="1.5" /* ... and so on ...*/ ></tr>

你想要这样做的原因是因为这比你的任意类更容易辨认 - 你会迷失在你使用的任意类中，因为它们并不明显。哪个更明显：＆＃39;给我一个贷方tg-031e f1 f2＆＃39;或者＆＃39;给我看一个2年固定类型的贷方＆＃39;？ （我知道它不正确，但它们并没有说同样的话，但这只是因为我已经在技术术语中迷失了。）想想开发人员可能会来之后你，以及你将要创造的头痛。如果让事情变得更加明显，不要害怕使用更多的角色，因为从长远来看，这将为你节省大量的时间。

相关问题
最新问题