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

Question

I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:

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

I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.

I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.

UPDATE 1:

The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:

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

});

Of course that's not the full code, but that is pretty much what I tried.

Thank you for all the help!

Answer 1

I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.

Check this code :

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