Как принимать значение из input type=radio для калькулятора подсчёта стоимости

Question

Делаю калькулятор подсчёта стоимости. У меня есть карточки (label) в которых есть контент и сам input type=radio. Как принимать значение для подставки в калькулятор js значений связанных с этими карточками? как лучше сделать - проставить value в верстке или дать их в калькуляторе (при условии что новых карточек не будет но цены у старых могут поменяться в будущем)?(делаю на pug; span - кастомный чекбокс) UPD: кратко - есть инпуты с типом радио. в зависимости от выбора пользователя подставляется в уравнение значение привязанное к карточке. как правильно сделать?

           <div class="checkbox-wrapper__tarifs">
                    <label>
                        /*Инфо карточки*/
                        <input type="radio" class="modern-radio" value="1" name="a">
                        <span class="span-t"></span>
                    </label>
                    <label>
                        /*Инфо карточки*/
                        <input type="radio" class="modern-radio" value="2" name="b">
                        <span class="span-t"></span>
                    </label>
                    <label>
                        /*Инфо карточки*/
                        <input type="radio" class="modern-radio" value="3" name="с">
                        <span class="span-t"></span>
                    </label>

Сам в самом калькуляторе выбранное значение попадает по итогу в уровнение подсч]та с другими переменными.

Answer 1

Ну для начала вам пригодятся все эти input-ы и поскольку они меняют один и тот же параметр их можно брать с помощью name:

const inputParameterValues = document.querySelectorAll(`input[type="radio"][name="param-group-name"]`);

Потом создаете слушатель для всех циклично. А какие данные передавать функции выбора - решать вам:

Номер в списке

const inputParameterValues = document.querySelectorAll(`input[type="radio"][name="param-group-name"]`);

for (let i = 0; i < inputParameterValues.length; i++) {
  const inputParameterValue = inputParameterValues[i];
  inputParameterValue.addEventListener(`change`, (event) => {
    if (inputParameterValue.checked) {
      selectParameter(i);
    }
  });
}

function selectParameter(id) {
  switch (id) {
    case 0:
      break;
    case 1:
      break;
    case 2:
      break;
    default:
      throw;
  }
}

<label>
  <input type="radio" name="param-group-name" checked />
  <span>First</span>
</label>
<label>
  <input type="radio" name="param-group-name" />
  <span>Second</span>
</label>
<label>
  <input type="radio" name="param-group-name" />
  <span>Third</span>
</label>

По значению value

const inputParameterValues = document.querySelectorAll(`input[type="radio"][name="param-group-name"]`);

for (let i = 0; i < inputParameterValues.length; i++) {
  const inputParameterValue = inputParameterValues[i];
  inputParameterValue.addEventListener(`change`, (event) => {
    if (inputParameterValue.checked) {
      selectParameter(inputParameterValue.value);
    }
  });
}

function selectParameter(value) {
  switch (value) {
    case `first`:
      break;
    case `second`:
      break;
    case `third`:
      break;
    default:
      throw;
  }
}

<label>
  <input type="radio" name="param-group-name" value="first" checked />
  <span>First</span>
</label>
<label>
  <input type="radio" name="param-group-name" value="second" />
  <span>Second</span>
</label>
<label>
  <input type="radio" name="param-group-name" value="third" />
  <span>Third</span>
</label>

БЛОГ НА HUSL

Как принимать значение из input type=radio для калькулятора подсчёта стоимости

Ответы (1 шт):