javascript - 使用 JS 或 Jquery 将复选框和单选框的值添加到标签

Question

我发誓在问你们之前我尝试了很多，但我就是不能让它正常工作。我有一个 radio 和一个复选框区域，如下所示:

<form class="form-horizontal text-left">
  <div class="form-group">
    <label>Plans</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="linePlan" value="100000">Plan 1
      </label>
    </div>
    <div>
      <label class="radio-inline">
        <input type="radio" name="linePlan" value="126000">Plan 2
      </label>
     </div>
     <div>
       <label class="radio-inline">
         <input type="radio" name="linePlan" value="160000">Plan 3
       </label>
     </div>
   </div>
   <div class="form-group">
     <label>Options</label>
     <div class="checkbox">
       <label>
         <input type="checkbox" id="english" value="3000">English
       </label>
     </div>
     <div class="checkbox">
       <label>
         <input type="checkbox" id="portuguese" value="3000">Portuguese
       </label>
     </div>
   </div>
   <div class="form-group">
     <label>Plans</label>
     <div>
       <label id="resultPlan" style="color:blue"></label>
       <label id="sumPlan" style="color:blue"></label>
    </div>
    <label>Options</label>
    <div>
      <label id="resultOption" style="color:blue"></label>
      <label id="sumOption" style="color:blue"></label>
    </div>
    <label>TOTAL</label>
    <label id="sumTotal" style="color:blue"></label>
  </div>
</form>

我想汇总用户的选择并将其显示为文本和数字。选定的 radio 将在#resultPlan 中显示为文本，它的值在#sumPlan 中。选中的复选框将在#resultOption 中显示为文本，它的值在#sumOption 中。如果用户选中两个框，#resultOption 将用逗号分隔每个选项，#sumOption 将是两个值的总和。最后，标签#sumTotal 将获取所有选择的值，求和并显示为数字。

我希望你们明白我正在努力做的事情。我希望找到一个适用于 IE 的解决方案，所以 JS 或 Jquery。

更新 1:

我创建的代码(但没有成功)是基于用户选择的每种可能情况。这是基本结构:

$("input[name=linePlan]").on('change',function(){

  var linePlan = $('input[name=linePlan]:checked');

  if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false))        {
    $('#resultPlan').text("Plan 1")
    $('#sumPlan').text('100000～')
    $('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
  } else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
    $('#resultPlan').text("Plan 2")
    $('#sumPlan').text('126000～')
    $('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
  }

});

当然这不是完整的代码，但这是我尝试过的。

感谢大家的帮助!

Answer 1

我刚刚为您的问题创建了一个代码。如果您需要税款，只需在下面添加条件语句即可。希望这会有所帮助。

检查这段代码:

$("input[name=linePlan],input[type=checkbox]").on('change', function() {

  var planvalue = parseInt($('input[name=linePlan]:checked').val());
  var plantext = $('input[name=linePlan]:checked').parent().text();
  var optionsvalue = 0;
  var options = [];
  $('input[type="checkbox"]').each(function() {
    if ($(this).is(':checked')) {
      optionsvalue += parseInt($(this).val());
      options.push($(this).parent().text());
    }
  });

  var optionstext = options.join(',');

  $('#resultPlan').text(plantext);
  $('#sumPlan').text(planvalue);

  $('#resultOption').text(optionstext);
  $('#sumOption').text(optionsvalue);
  if (optionsvalue == 0)
    $('#resultOption').text("No Options");
  $('#sumTotal').text(planvalue + optionsvalue);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
  <div class="form-group">
    <label>Plans</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="linePlan" value="100000">Plan 1
      </label>
    </div>
    <div>
      <label class="radio-inline">
        <input type="radio" name="linePlan" value="126000">Plan 2
      </label>
    </div>
    <div>
      <label class="radio-inline">
        <input type="radio" name="linePlan" value="160000">Plan 3
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>Options</label>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="english" value="3000">English
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="portuguese" value="3000">Portuguese
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>Plans</label>
    <div>
      <label id="resultPlan" style="color:blue"></label>
      <label id="sumPlan" style="color:blue"></label>
    </div>
    <label>Options</label>
    <div>
      <label id="resultOption" style="color:blue"></label>
      <label id="sumOption" style="color:blue"></label>
    </div>
    <label>TOTAL</label>
    <label id="sumTotal" style="color:blue"></label>
  </div>
</form>