Radio button calculator with nested if Stateme-CodePudding

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.

I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.

$(".w-radio").change(function() {
  var totalPrice = 0,
    values = [];

  $("input[type=radio]").each(function() {
    if ($(this).is(":checked")) {
      if ($(this).is('[name="catering"]')) {
        var cateringFunc = (
          $(this).val() * $('[name="gastronomy"]').attr("add-value")
        ).toString();
        values.push($(this).val());
      }
      values.push($(this).val());
      totalPrice  = parseInt($(this).val());
    }
  });

  $("#priceTotal span").text(totalPrice);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >

  <input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
  <input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
  <input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
  <input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label >
  <input type="radio" name="venue" value="0">0<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label >
  <input type="radio" name="catering" value="0">0<BR>
  <input type="radio" name="catering" value="40">40<BR>
  <input type="radio" name="catering" value="45">45<BR>
  <input type="radio" name="catering" value="60">60<BR>
</label>

<div >

  <div id="priceTotal">
    <span>0</span>
  </div>
</div>

CodePudding user response：

When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.

I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.

You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.

$(".w-radio").change(function() {
  var totalPrice = 0,
    values = [];

  $("input[type=radio]:checked").each(function() {
    if ($(this).is('[name="catering"]')) {
      var cateringFunc = (
        $(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
      );
      values.push(cateringFunc.toString());
      totalPrice  = cateringFunc;
    }
    values.push($(this).val());
    totalPrice  = parseInt($(this).val());
  });

  $("#priceTotal span").text(totalPrice);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >
  <input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
  <input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
  <input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
  <input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label >
  <input type="radio" name="venue" value="0">0<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
  <input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label >
  <input type="radio" name="catering" value="0">0<BR>
  <input type="radio" name="catering" value="40">40<BR>
  <input type="radio" name="catering" value="45">45<BR>
  <input type="radio" name="catering" value="60">60<BR>
</label>

<div >

  <div id="priceTotal">
    <span>0</span>
  </div>
</div>