0

Столкнулся с такой проблемой. Есть список input type="radio", и на деле он очень большой, так что возникла необходимость вывести это все дело через select, таким образом, чтобы при выборе option этого select, нужный radio становился активным. сами input radio я потом хотел просто скрыть. я сделал вот такой код, он работает, но почему то только несколько раз, а потом перестает, хоть убей не пойму почему

document.addEventListener('DOMContentLoaded', function(){
  
  let select = document.querySelector('#select-delivery'),
      radioItem = document.querySelectorAll('.delivery__item');

  select.addEventListener('change', function(){
    let thisValue = this.value;
    radioItem.forEach( item => {

      if( item.value == thisValue ){
        item.setAttribute('checked', 'checked');
      } else{
        item.removeAttribute('checked');
      }

    });
  });
});
<div class="col-12 col-md-6" id="deliveries">
  <h4>Варианты доставки:</h4>
  <div class="form-group row">
    <div class="col-12">
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="1" id="delivery_1" data-payments="[1]">
          Самовывоз                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="2" id="delivery_2" data-payments="[1]" >
          По региону                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="3" id="delivery_3" data-payments="[1]">
          По городу                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="4" id="delivery_4" data-payments="[1]">
          По стране                                                                                            
        </label>
      </div>
      <select name="" id="select-delivery">
        <option value="0">Не выбрано</option>
        <option value="1">Самовывоз</option>
        <option value="2">По региону</option>
        <option value="3">По городу</option>
        <option value="4">По стране</option>
      </select>
    </div>
  </div>
</div>

https://codepen.io/sergo/pen/rNLOKLG?editors=0011

Был бы очень признателен за подсказку, только, если можно, на чистом js

2
  • Если радио всё равно будете скрывать, то не проще ли вообще избавиться от них, а значение брать непосредственно из селекта?
    – UModeL
    26 окт 2020 в 17:27
  • 1
    Да это программист попросил так сделать, там какой то нюанс в cms 26 окт 2020 в 18:04

1 ответ 1

2

Проблема в том что вы добавляете и удаляете атрибут чекбокса, а не меняете его свойство. Не знаю почему именно это срабатывает только 1 раз. Но если сделать вот так, то все работает:

document.addEventListener('DOMContentLoaded', function(){
   let select = document.querySelector('#select-delivery'),
      radioItem = document.querySelectorAll('.delivery__item');

  select.addEventListener('change', function(){
    radioItem.forEach( item => {
      if( item.value == this.value ){
        item.checked = true;
      } else{
        item.checked = false;
      }

    });
  });
});
<div class="col-12 col-md-6" id="deliveries">
  <h4>Варианты доставки:</h4>
  <div class="form-group row">
    <div class="col-12">
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="1" id="delivery_1" data-payments="[1]">
          Самовывоз                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="2" id="delivery_2" data-payments="[1]" >
          По региону                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="3" id="delivery_3" data-payments="[1]">
          По городу                                                                                            
        </label>
      </div>
      <div class="checkbox">
        <label class="col-form-label delivery input-parent">
          <input class="delivery__item" type="radio" name="delivery" value="4" id="delivery_4" data-payments="[1]">
          По стране                                                                                            
        </label>
      </div>
      <select name="" id="select-delivery">
        <option value="0" disabled>Не выбрано</option>
        <option value="1">Самовывоз</option>
        <option value="2">По региону</option>
        <option value="3">По городу</option>
        <option value="4">По стране</option>
      </select>
    </div>
  </div>
</div>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.