javascript - jQuery onchange sum 不能限制输入类型数

Question

我使用脚本对输入值求和，它可以工作。但是，当我上下点击“input#total_selfmark”并没有改变，当我输入数字时，“input#total_selfmark”改变了，数字没有限制。即使我设置了 min=0 max =$task_criteria->maximummark

     <div class="form-group">
{{ Form::number('selfmark','',['placeholder'=>'', 'class' =>'selfmark', 'min'=>'0','max'=>$task_criteria->maximummark]) }}
       </div>

这是脚本

$(document).ready(function() {
  //this calculates values automatically
  calculateSum();
  $(".selfmark").on("keydown keyup", function() {
    calculateSum();
  });
});

function calculateSum() {
  var sum = 0;

  //iterate through each textboxes and add the values
  $(".selfmark").each(function() {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
      $(this).css("background-color", "#FEFFB0");
    } else if (this.value.length != 0) {
      $(this).css("background-color", "red");
    }
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
We miss some HTML here!

标签： javascriptjquerylaravelforeachsum

Answer 1

我猜你的 HTML，我也假设你故意有一个旧的 jQuery 版本

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");    });

function calculateSum() {
  var sum = 0;
  $(".selfmark").each(function() { // or map/reduce
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val>max) {
      bg= "red";
    }    
    else {
      sum += parseFloat(val);
    } 
    $(this).css("background-color", bg);
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />

替代方案 - 不是更短，而是使用 fn.map 和 reduce

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");
});

function calculateSum() {
  var sum = $(".selfmark").map(function(idx, ele) {
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val > max) {
      bg = "red";
      val = 0;
    } 
    else val = +val;
    $(this).css("background-color", bg);
    return val;
  }).get().reduce(function(a, b) { return a + b; }, 0); // sum the array
  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />