如何仅在填写所有表单字段时显示结果？答案

【问题标题】：How to show result only when all form fields are filled?如何仅在填写所有表单字段时显示结果？
【发布时间】：2014-06-02 22:30:50
【问题描述】：

这是我的代码：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){
      $(".input").bind("change keyup", function(){
            var val1 = +$(".value1").val();
            var val2 = +$(".value2").val();
            var val3 = +$(".value3").val();
            var val4 = +$(".value4").val();
            $("#result").val(val1+val2+val3+val4);
     });
  });
  </script>
</head>
<body>
  <select class="input value1">
    <option value="">Choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select class="input value2">
    <option value="">Choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select class="input value3">
    <option value="">Choose</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <input type="text" class="input value4">
  <input type="text" disabled="disabled" id="result">
</body>
</html>

我只想在填写或选择所有字段时显示结果。此外，在禁用的文本字段中，当某些字段未填写时，我想打印一条消息，例如“您必须检查每个字段”。如何修改这段代码来实现这一点？

【问题讨论】：

为什么要使用类来识别单个控件？这就是“id”属性的用途。
这只是一个例子。我知道在这种情况下最好使用 id 而不是类。

标签： javascript jquery forms calculator

【解决方案1】：

就这样吧：

$(document).ready(function(){
  $(".input").bind("change keyup", function(){
        var val1 = +$(".value1").val();
        var val2 = +$(".value2").val();
        var val3 = +$(".value3").val();
        var val4 = +$(".value4").val();

        if(parseFloat(val1) > 0 && parseFloat(val2) > 0 && parseFloat(val3) > 0 && parseFloat(val4) > 0) {
           $("#result").val(val1+val2+val3+val4);
        }
        else {
           $("#result").val('You must check every field');
        }              
   });
});

【讨论】：