добавление цены с помощью переключателя в html

Question

Я хочу установить разные цены (включая налог) для каждого способа оплаты, указанного ниже.

when user choose the payment method (radio button), it will show the the price on cart total column. This is what I'm doing in my view.

               Выберите способ оплаты  Кредитная карта 

 Крис 

 Банковский перевод BNI 

 Банковский перевод Permata 

  Я согласен с  условиями и положениями    

большая часть учебников, которые я обнаружил, использует значение переключателя для установки вывода. но поскольку я использую значение для следующего шага, я ищу другое решение для этого. Могу ли я что-нибудь сделать или какие-либо ссылки, похожие на мою проблему?

Answer 1

Я бы просто создал функцию, которая изменяет плату в зависимости от выбранного радиовхода, обновляю внутренний html вашего элемента платы, а затем просто применяю это к каждому событию метода оплаты onclick.

Функция :

  function selectPayment(type) {
    let fee;
    if(type === 'Credit Card') {
      fee = 5;
    }
    if(type === 'Qris') {
      fee = 10;
    }
    ((REPEAT FOR EACH PAYMENT TYPE))
    ((CALCULATE TOTAL HERE))
    document.getElementById('fee').innerHTML = "Fee: $" + fee;
  }

Затем примените эту функцию к onclick каждого радиоэлемента.

<label class="btn bg-payment btn-primary form-check-label full-width-height">
    <input name="pay" value="credit_card" class="form-check-input" type="radio" autocomplete="off"  onclick="selectPayment('Credit Card')" required> Credit Card </label>

Вот базовая c ручка, которая делает именно это: https://codepen.io/sted6/pen/rNxvRdm

Очевидно, вам нужно настроить его, чтобы отображать плату, как вы хотите, и установить правильные суммы, а какие нет, но эта общая методология должна работать.