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

Posted 2023-03-27

【中文标题】使用 JS 或 Jquery 将复选框和单选的值添加到标签

【英文标题】：Add values from checkbox and radio to a label using JS or Jquery

【发布时间】：2016-06-23 17:04:09

【问题描述】：

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

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

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

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

);

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

感谢大家的帮助！

【问题讨论】：

显示你的尝试。

你好@BenG！我刚刚用以前的代码更新了我的帖子。但没有所有元素，但它几乎是我尝试使用的“逻辑”。谢谢！

在jsfiddle.net上创建一个完整代码的小提琴

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

【参考方案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>

【讨论】：

工作完美，拉尔夫！非常感谢！！