使用 jquery 求和字段输入值

Question

简单的问题：我想对字段输入中出现的值求和并显示为累积分数。 我正在使用 jquery 来捕获选择并使用字典遍历来查找得分值并将得分放在相应的得分输入字段中。

下面的 codepen 链接中包含的示例：

代码笔示例

HTML：

<div class="row">
        <div class="col">
          <div class="form-group">
          <label>Example select</label>
          <select class="form-control" id="risk_loc_name">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
          </div>
        </div>

<div class="col">
<label for="risk_loc_val">Score</label>
          <input type="text" name="risk_loc_val" id="risk_loc_val" class="form-control risk_score" placeholder=" "> 

        </div>
</div>


<div class="row">
        <div class="col">
          <label>Example select</label>
          <select class="form-control" id="risk_loc_fam">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
         </div>

 <div class="col">
          <label for="risk_loc_fam_val">Score</label>
          <input type="text" name="risk_loc_fam_val" id="risk_loc_fam_val" class="form-control risk_score" placeholder=" "> 


</div>
  </div>
<br>
<div class="row">
  <div class="col">
    <input type="text" id="risk_sum" name="risk_sum" placeholder="Total risk score">
  </div>
</div>

我希望分数在选择选项时更新：

const risk_loc_choices = {
 "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

const risk_loc_famil = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

$(function() {
  //Capture fields
  var risk_loc_name =  $('#risk_loc_name');
  var risk_loc_value = $('#risk_loc_val');
  var risk_loc_fam =  $('#risk_loc_fam');
  var risk_loc_faml_val = $('#risk_loc_fam_val');

  // call to update on load
  updateRisk();
  updateRiskLocFam();

  function updateRisk() {
    var data = risk_loc_name.val();
    var r_val = risk_loc_choices[data];

    risk_loc_value.attr('disabled', 'disabled');
    //for normal input
    risk_loc_value.val('');

    // Append selected value to field
    // for normal input
    risk_loc_value.val( risk_loc_value.val() + r_val );

   };

 function updateRiskLocFam() {
  var data = risk_loc_fam.val();
  var r_val = risk_loc_famil[data];

  risk_loc_faml_val.attr('disabled', 'disabled');
  //for normal input
  risk_loc_faml_val.val('');

  // Append selected value to field
  // for normal input
  risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );


  };


  // event listener to state dropdown change
  risk_loc_name.on('change', function() {
  updateRisk();
  });

  risk_loc_fam.on('change', function() {
  updateRiskLocFam();
  });
});



$(function(){
  var sels = $('.risk_score');
  var sum = 0;
  sels.each(function() {
    sum+=parseInt($(this).val());
  });
  $('#risk_sum').val(sum);
});

// This doesn't work:

$('.risk_score').on('input', function() {
  var total = 0;
  $('.risk_score').each(function() {
    total += parseInt($(this).val());
  });
  $('#risk_sum').val(total);
});

一切都在上面链接的笔中。

Answer 1

这是我实现你想要的代码笔。 使用触发器表示已禁用字段中的值已更新。

const risk_loc_choices = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

const risk_loc_famil = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

$(function() {
  //Capture fields
  var risk_loc_name =  $('#risk_loc_name');
  var risk_loc_value = $('#risk_loc_val');
  var risk_loc_fam =  $('#risk_loc_fam');
  var risk_loc_faml_val = $('#risk_loc_fam_val');

  // call to update on load
  updateRisk();
  updateRiskLocFam();

  function updateRisk() {
    var data = risk_loc_name.val();
    var r_val = risk_loc_choices[data];

    risk_loc_value.attr('disabled', 'disabled');
    //for normal input
    risk_loc_value.val('');

    // Append selected value to field
    // for normal input
    risk_loc_value.val( risk_loc_value.val() + r_val );
    risk_loc_value.trigger('change');
  };

function updateRiskLocFam() {
  var data = risk_loc_fam.val();
  var r_val = risk_loc_famil[data];

  risk_loc_faml_val.attr('disabled', 'disabled');
  //for normal input
  risk_loc_faml_val.val('');

  // Append selected value to field
  // for normal input
  risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );
  risk_loc_faml_val.trigger('change');
};


// event listener to state dropdown change
risk_loc_name.on('change', function() {
    updateRisk();
});

risk_loc_fam.on('change', function() {
    updateRiskLocFam();
});
});

$(function(){
  var sels = $('.risk_score');
  var sum = 0;
  sels.each(function() {
    sum+=parseInt($(this).val());
  });
  $('#risk_sum').val(sum);
});


$('.risk_score').on('change', function() {
  var total = 0;
  $('.risk_score').each(function() {
    total += parseInt($(this).val());
  });
  $('#risk_sum').val(total);
});