Unable to retrieve value for multiple radio buttons

April 6, 2023

I have the following code for which I am unable to retrieve the value for the second radio button to use in my calculation. I have two radio button groups each having two values in them but only the first radio button value is being retrieved/used.

$(document).ready(function() {
  $('#option1').on('change', function() {
    update_total();
  });

  $('#option2').on('change', function() {
    update_total();
  });


  function update_total() {
    var tot = 0;
    var price = 0;
    $('#option1 input:checked').each(function() {
      price = parseFloat($(this).data('price'));
      if (price >= 0) {
        tot += price;
      }
    });
    $('#option2 select').each(function() {
      price1 = parseFloat($("option:selected", this).data('price1'));
      if (price1 >= 0) {
        tot += price1;
      }
    });
    $('.modlcstmtotal').html(tot.toFixed(2));
  }
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="option1">
  <input type="radio" class="form-radio-input" id="choice1" name="choicemodal1" value="0" checked data-price="0"><label for="choice1" class="width100">Preferred Customer</label>
  <input type="radio" class="form-radio-input" id="choice2" name="choicemodal1" value="1" data-price="1"><label for="choice2" class="width100">Not a Preferred Customer</label>
</div>
<hr>
<div id="option2"></div>
<input type="radio" class="form-radio-input" id="choice3" name="choicemodal2" value="0" checked data-price1="0"><label for="choice3" class="width100">Trusted Traveler</label>
<input type="radio" class="form-radio-input" id="choice4" name="choicemodal2" value="0.15" data-price1="0.15"><label for="choice4" class="width100">Not a Trusted Traveler</label>
</div>

<br><br>
<div>Total shipping cost is:</div>
<div class="modlcstmtotal"></div>

I tried to adjust my html but it didn’t work.

>Solution :

You have a few typos

<div id="option2"> isn’t wrapping your radios.

and this is referring to a select and not input:checked

$("#option2 select")

However, I made some improvements to your code to simplify. Since your prices are also the values of the radio, I’m simply looping through each checked radio and getting its value. And having in if statement if the value >= 0 isn’t really needed unless you are expecting values under 0.

$(document).ready(function() {
  $('.form-radio-input').on('change', function() {
    update_total();
  });

  function update_total() {
    var tot = 0;
    
    $(".form-radio-input:checked").each(function() {
      tot += parseFloat($(this).val());
    });
    
    $('.modlcstmtotal').html(tot.toFixed(2));
  }
  
  update_total();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="option1">
<input type="radio" class="form-radio-input" id="choice1" name="choicemodal1" value="0" checked data-price="0"><label for="choice1" class="width100">Preferred Customer</label>
<input type="radio" class="form-radio-input" id="choice2" name="choicemodal1" value="1" data-price="1"><label for="choice2" class="width100">Not a Preferred Customer</label>
</div>
<hr>
<div id="option2">
<input type="radio" class="form-radio-input" id="choice3" name="choicemodal2" value="0" checked data-price1="0"><label for="choice3" class="width100">Trusted Traveler</label>
<input type="radio" class="form-radio-input" id="choice4" name="choicemodal2" value="0.15" data-price1="0.15"><label for="choice4" class="width100">Not a Trusted Traveler</label>
</div>

<br><br>
<div>Total shipping cost is:</div><div class="modlcstmtotal"></div>