Как задавать и убирать data аттрибут на input[type=radio] в зависимости от :checked

Question

Мне нужно чтобы при выборе radio добавлялся аттрибут data-checked, а при изменении выбора - убирался и переставлялся на другой вариант. У меня вышло сделать так, что аттрибут ставится, но не выходит сделать удаление. Решение должно быть на чистом JS. Заранее спасибо)

Использую примерно такой код:

form.addEventListener('change', function(e) {
  const target = e.target;

  if (target.checked) {
    target.parentElement.setAttribute('data-checked', 'true');
  } else {
    target.parentElement.removeAttribute('data-checked', 'true');
  }
});

<div class="survey__item_answer --age js-input-radio">
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id1">
    <label for="id1" class="survey__item_label">Under 18</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id2">
    <label for="id2" class="survey__item_label">18-24</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id3">
    <label for="id3" class="survey__item_label">25-34</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id4">
    <label for="id4" class="survey__item_label">35-44</label>
  </div>
</div>

Answer 1

Так?

const form = document.querySelector('.js-input-radio');

form.addEventListener('change', function(e) {
  const target = e.target;
  
  if(target.type === 'radio') {
    if(target.checked && !target.hasAttribute('data-checked')) {
      target.setAttribute('data-checked', true);
    } else {
      target.removeAttribute('data-checked');
    }
  }
});

[data-checked] ~ label {
  background: red;
}

<div class="survey__item_answer --age js-input-radio">
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id1">
    <label for="id1" class="survey__item_label">Under 18</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id2">
    <label for="id2" class="survey__item_label">18-24</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id3">
    <label for="id3" class="survey__item_label">25-34</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id4">
    <label for="id4" class="survey__item_label">35-44</label>
  </div>
</div>

Для демо через CSS меняется background у label, если у input есть атрибут data-checked.

Если требуется, чтобы предыдущий удалялся.

const form = document.querySelector('.js-input-radio');

form.addEventListener('change', function(e) {
  const target = e.target;
  
  if(target.type === 'radio') {
    let old = form.querySelector('input[data-checked="true"]');
    if(old) old.removeAttribute('data-checked');
    target.setAttribute('data-checked', true);
    
  }
});

[data-checked] ~ label {
  background: red;
}

<div class="survey__item_answer --age js-input-radio">
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id1">
    <label for="id1" class="survey__item_label">Under 18</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id2">
    <label for="id2" class="survey__item_label">18-24</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id3">
    <label for="id3" class="survey__item_label">25-34</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id4">
    <label for="id4" class="survey__item_label">35-44</label>
  </div>
</div>

Если требуется устанавливать атрибут на родителя.

const form = document.querySelector('.js-input-radio');

form.addEventListener('change', function(e) {
  const target = e.target;
  
  if(target.type === 'radio') {
    let old = form.querySelector('.survey__item_variant[data-checked="true"]');
    if(old) old.removeAttribute('data-checked');
    target.closest('.survey__item_variant').setAttribute('data-checked', true);
  }
});

.survey__item_variant[data-checked] {
  background: #ccc;
}

<div class="survey__item_answer --age js-input-radio">
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id1">
    <label for="id1" class="survey__item_label">Under 18</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id2">
    <label for="id2" class="survey__item_label">18-24</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id3">
    <label for="id3" class="survey__item_label">25-34</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id4">
    <label for="id4" class="survey__item_label">35-44</label>
  </div>
</div>

Answer 2

Чтобы удалить атрибут у элемент c data-checked нужно просто обратиться к нему document.querySelector('[data-checked]'). А после этого назначить этот атрибут на target

let form = document.querySelector('.form');
form.addEventListener('change', function(e) {
  const target = e.target;
  if (target.checked) {
  let parent = target.closest('.js-input-radio');
  parent.querySelector('[data-checked]')?.removeAttribute('data-checked');
    target.parentElement.setAttribute('data-checked', 'true');  
  }
});

<div class="survey__item_answer --age js-input-radio form">
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id1">
    <label for="id1" class="survey__item_label">Under 18</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id2">
    <label for="id2" class="survey__item_label">18-24</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id3">
    <label for="id3" class="survey__item_label">25-34</label>
  </div>
  <div class="survey__item_variant">
    <input name="age" type="radio" class="survey__item_input --radio" id="id4">
    <label for="id4" class="survey__item_label">35-44</label>
  </div>
</div>

БЛОГ НА HUSL

Как задавать и убирать data аттрибут на input[type=radio] в зависимости от :checked

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