使用 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);
});