CheckBox If 语句检查不是检查嵌套条件

Question

功能：

用户将在一个表单中输入他们的详细信息，该表单包括：下拉菜单、输入文本字段和一个复选框。因此，第一个检查是确保适当的字段被填写并且没有空白字段，如果所有适当的字段都被填写，第二个条件将检查复选框是否已被勾选。根据复选框是否被勾选，它将执行第三次检查。如果复选框被选中（用户只需花费 50 美元即可继续，否则会出现错误消息）否则如果未选中复选框（用户只需花费 100 美元，则会出现错误消息）。

因此功能流程如下：

如果（下拉菜单_1和输入文本字段_1已填充或下拉菜单_2和输入文本字段_2已填充），它将检查复选框->如果（选中复选框），它将检查值-> if（输入文本字段_1 大于$x 或输入文本字段_2 大于$x 或输入文本字段_1 + 输入文本字段_2 大于$x)

问题：

无论用户在文本字段中输入的值是多少，都会调用该值是否超过 50 美元或 100 美元的条件检查。

因此，即使用户选中该框并输入 20 美元，正确的行为是显示用户必须花费 50 美元的错误消息，但当前行为允许用户提交详细信息并继续到下一页.

我需要一些帮助来解决问题，因为检查语法是检查文本字段中的值是否超过根据复选框的状态规定的值。

//Check for Input Field

if (($.trim($("#dropDownShops_1").val()) == "" || $.trim($("#ReceiptField_1").val()) == "") && ($.trim($("#dropDownShops_2").val()) == "" || $.trim($("#ReceiptField_2").val()) == "")) {

  console.log("Receipt_Field_Error wrong");
  $("#ReceiptInput_Field_Error").html("* Please fill in appropriate fields.");
  $("#ReceiptInput_Field_Error").fadeIn();

  setTimeout(function() {
    $("#ReceiptInput_Field_Error").fadeOut();
  }, 5000);

} else {

  //Check if American Card is used: Min spending of SGD$120 else will be min spending of SGD$150

  //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if (($("#ReceiptField_1").val() >= '120') || ($("#ReceiptField_2").val() >= '120') || [
      [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '120'
    ]) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

  } else if ((!$('#AmaxCardField:checked').length)) {

    //Check that the input value field is SGD$150 or more else, inform that minimum spending is SGD150
    if (($("#ReceiptField_1").val() >= '150') || ($("#ReceiptField_2").val() >= '150') || [
      [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '150'
    ]) {


      console.log("Amex user and spent more than $150");

      alert("Amex user and spent more than $150");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $150 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);

    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReceiptInput_Field_Error" style="z-index:1; position:absolute; top:270px; left:650px; display: none; font-size:35px; font-family:'Gothic'; width:1080; color:#fff;"><font face="Gothic">* Please fill in appropriate fields.</font>
</div>

<form>

  <!-- DropDown Menu to choose Participating Outlet -->
  <select id="dropDownShops_1">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_1" style="z-index=10; position:absolute; top:390px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725; background: transparent;" autofocus>

  <select id="dropDownShops_2">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_2" style="z-index=10; position:absolute; top:585px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725;  background: transparent;">

  <input type="checkbox" id="AmaxCardField" style="z-index=10; position:absolute; top:690px; left:420px; height:30px; width:30px; outline=0; border: 0; background: transparent;">
</form>

JSFiddle：https://jsfiddle.net/s42akp2k/

Plunker：https://plnkr.co/edit/fLETQc4gS0stYHro7pNF?p=catalogue

Answer 1

由于某种原因，您的条件中有一个数组。我认为您的意思是使用括号进行分组，而不是括号。我解决了这个问题，现在它可以工作了。

//Check for Input Field

$('#submit').click(function(){
if (($.trim($("#dropDownShops_1").val()) == "" || $.trim($("#ReceiptField_1").val()) == "") && ($.trim($("#dropDownShops_2").val()) == "" || $.trim($("#ReceiptField_2").val()) == "")) {

  console.log("Receipt_Field_Error wrong");
  $("#ReceiptInput_Field_Error").html("* Please fill in appropriate fields.");
  $("#ReceiptInput_Field_Error").fadeIn();

  setTimeout(function() {
    $("#ReceiptInput_Field_Error").fadeOut();
  }, 5000);

} else {

  //Check if American Card is used: Min spending of SGD$120 else will be min spending of SGD$150

  //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if (($("#ReceiptField_1").val() >= 120) || ($("#ReceiptField_2").val() >= 120) || (
      (($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())) >= '120'
    )) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

  } else if ((!$('#AmaxCardField:checked').length)) {

    //Check that the input value field is SGD$150 or more else, inform that minimum spending is SGD150
    if (($("#ReceiptField_1").val() >= '150') || ($("#ReceiptField_2").val() >= '150') || (
      (($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())) >= '150'
    )) {


      console.log("Amex user and spent more than $150");

      alert("Amex user and spent more than $150");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $150 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);

    }
  }
}
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReceiptInput_Field_Error"><font face="Gothic">* Please fill in appropriate fields.</font>
</div>

<form>

  <!-- DropDown Menu to choose Participating Outlet -->
  <select id="dropDownShops_1">
    <option value="" selected disabled>Please Select Shops ...</option>
    <option value="...">...</option>
  </select>

  <input type="text" id="ReceiptField_1" autofocus>

  <select id="dropDownShops_2">
    <option value="" selected disabled>Please Select Shops ...</option>
    <option value="...">...</option>
  </select>

  <input type="text" id="ReceiptField_2" >

  <input type="checkbox" id="AmaxCardField" >
  
  <input type="submit" id="submit" />
</form>

Answer 2

您可能想看看this 将您的输入字段设置为数字类型，然后使用数字比较器而不是这样的字符串（更改比较器以删除货币符号并使其成为数字）：

 //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if ((Number($("#ReceiptField_1").val().replace(/[^0-9\.]+/g,"")) >= 120) || (Number($("#ReceiptField_2").val().replace(/[^0-9\.]+/g,"")) >= 120) || (
      ((Number($("#ReceiptField_1").val().replace(/[^0-9\.]+/g,""))) + (Number($("#ReceiptField_2").val().replace(/[^0-9\.]+/g,"")))) >= 120
    )) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }