Как получить данные из checkbox и отдать его в input text

Question

Я хочу написать код на javascipt, а именно проверить значения checkbox и если он включен то получить из него данные и вывести у input text

<form>
                        <label class="gtr">
                        <input type="checkbox" name="check1" value="100" class="rtg" id="a">
                        <span class="mrt"></span>
                        <span class="lst">Проживання в готелі</span>
                        </label>
                        <label class="gtr">
                        <input type="checkbox" name="check2" value="150" class="rtg" >
                        <span class="mrt"></span>
                        <span class="lst">Переліт</span>
                        </label>
                        <label class="gtr">
                        <input type="checkbox" name="check3" value="50" class="rtg">
                        <span class="mrt"></span>
                        <span class="lst">Тиразове харчування</span>
                        </label>
                        <label class="gtr">
                        <input type="checkbox" name="check3" value="40" class="rtg">
                        <span class="mrt"></span>
                        <span class="lst">Екскурсії</span>
                        </label>
                        <label class="gtr">
                        <input type="checkbox" name="check3" value="10" class="rtg">
                        <span class="mrt"></span>
                        <span class="lst">Трансфер в аеропорт</span>
                        </label>
                        <label class="gtr">
                        <input type="checkbox" name="check3" value="20" class="rtg">
                        <span class="mrt"></span>
                        <span class="lst">Абонемент в басейн</span>
                        </label>
                     </form>
                </div>
                <div>
                    <button type="reset" class="btn1 first">Відмінити</button>
                    <input type="text" name="output1" id="str" class="type-1">
                    <button class="btn first" onclick="price()">Вартість</button>
                </div>

Answer 1

Для начала найдем искомый элемент:

const someCheckbox = document.querySelector('.rtg');

Далее проверим отмечен ли он:

if (someCheckbox.checked) { ... }

Изменить значение input на значение из checkbox можно следующим образом:

someInput.value = someCheckbox.value;

Логика, которую вы описываете, будет работать не совсем корректно. Думаю следует заменить checkbox на radio.

UPD:

const checkboxElems = document.querySelectorAll('.rtg');
const outputInput = document.getElementById('str');

for (let i = 0; i < checkboxElems.length; i++)
  (function(n) {
    checkboxElems[n].addEventListener('change', function(item) {
      const currentItemValue = parseInt(this.value);
      const outputInputValue = parseInt(outputInput.value || 0);
      if (this.checked) {
        outputInput.value = outputInputValue + currentItemValue;
      } else {
        outputInput.value = outputInputValue - currentItemValue;
      }
    });
  })(i);

БЛОГ НА HUSL

Как получить данные из checkbox и отдать его в input text

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