使用 JS 或 Jquery 将复选框和无线电中的值添加到标签中

Add values from checkbox and radio to a label using JS or Jquery

本文关键字：添加 标签 无线电 JS Jquery 复选框 使用      更新时间：2023-09-26

我发誓在问你们之前我尝试了很多，但我就是无法让它正常工作。我有一个收音机和一个复选框区域，如下所示：

<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>

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

我希望你们能得到我想做的事情。我希望找到一个适用于IE的解决方案，所以JS或Jquery。

更新 1：

我创建的代码（但没有成功）是基于use'r选择的每个可能情况。这是基本结构：

$("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)) + '～')
  }
});

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

谢谢大家的帮助！

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

检查此代码：

$("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>

相关文章：