Question

我有一个包含三个部分的付款表单。基本上，第一个是＆＃34;无线电＆＃34;带有乘数的列表，第二个是＆＃34;复选框＆＃34;带有设定值的列表，第三个是带有乘数的下拉列表==＆gt; (jsfiddle)。为清楚起见，我插入了一个显示总计算值的文本框。

当用户填写此表单时，如何计算和显示总数？

我尝试使用this堆栈溢出响应，但它根本不起作用。

$('input').change(function(){
    var tot = 1;
    $.each($('input'),function(){
      var curr_val = $(this).val();
        if(curr_val != ""){
          tot = tot * curr_val;
          $('#total').val(tot);
        }
    });
});

Answer 1

您可以将选择器更改为排除 #total，因为您不想听取其更改 - $(':input').not('#total').change。

您可以使用#map() jquery函数来获取已检查框的数组。

下一步是将它们全部乘以 - 使用#reduce()函数添加数组。

见下面的演示：

＆＃13;

$(':input').not('#total').change(function() {
  var tot = 1;

  var s1 = +$('input[name=section1]:checked').val();
  var s2 = $('input[name=section2]:checked').map(function() {
    return +$(this).val();
  }).get();
  var s3 = +$('select').val();
  $('#total').val(s1 * (s2.reduce(function(p,c){
    return p + c;
  },0) || 1) * s3);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <div id="section1">Section 1
    <br><input type="radio" name="section1" value="2"> x2
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1.5"> x1.5
    <br><input type="radio" name="section1" value="1"> x1
    <br><input type="radio" name="section1" value="1"> x1
  </div>
  <br>
  <div id="section2">Section 2
    <br><label><input type="checkbox" name="section2" value="4"><span>1</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>2</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>3</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>4</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>5</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>6</span></label>
    <br><label><input type="checkbox" name="section2" value="4"><span>7</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>8</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>9</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>10</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>11</span></label>
    <label><input type="checkbox" name="section2" value="4"><span>12</span></label>
  </div>
  <br>
  <div>Section 3<br>
    <select>
   <option value="7">1 week</option>
   <option value="14">2 weeks</option>
   <option value="21">3 weeks</option>
   <option value="28">4 weeks</option>
  </select>
  </div>
  <input type="text" value="0" id="total">
</form>

＆＃13;

jquery-在填写复选框/广播/下拉表单后计算总值

1 个答案: