CheckBox如果语句检查没有检查嵌套条件

时间：2016-12-19 05:53:48

标签： javascript jquery if-statement checkbox

功能性：

用户要以下列形式输入他们的详细信息：下拉菜单，输入文本字段和复选框。因此，第一个检查是确保填充适当的字段而没有空白字段，如果填写了所有适当的字段，则第二个条件将检查是否勾选了复选框。根据复选框是否已勾选，它将执行第三次检查。如果选中该复选框（用户只需花50美元继续其他操作就会出现错误消息）否则如果未选中复选框（用户只需支付100美元，则会出现错误消息）。

因此功能流程如下：

如果（下拉menu_1＆amp;输入文字field_1已填写或下拉菜单_2和输入文字字段_2已填写），则会选中复选框 - ＆gt;如果（勾选复选框），它将检查值 - ＆gt; if（输入文本field_1大于$ x或输入文本field_2大于$ x或输入文本field_1 +输入文本field_2大于$ x）

问题：

无论用户在文本字段中输入的值如何，始终会调用值大于50美元或100美元的条件检查。

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

我需要一些有关错误的帮助，因为检查语法是检查textfield中的值是否超过所述值，具体取决于复选框的状态。

//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

2 个答案:

答案 0 :(得分：0)

您可能希望查看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);
    }

答案 1 :(得分：0)

出于某种原因，你的条件中有一个数组。我认为您打算使用括号进行分组，而不是括号。我修好了，现在它正在工作。

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

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

相关问题
最新问题