Как я могу добавить / удалить класс для дочернего тега с другим родительским тегом

Question

Я сделал это:

<ul id="list">
  <li class="type">
    <input type="radio" name="selector" id="uberX" value="1">
    <label for="uberX">Uber X</label>
    <div class="check"></div>
  </li>

  <li class="type">
    <input type="radio" name="selector" id="uberSUV" value="2">
    <label for="uberSUV">Uber SUV</label>
    <div class="check"></div>
  </li>

  <li class="type">
    <input type="radio" name="selector" id="uberBlack" value="3">
    <label for="uberBlack">Uber Black</label>
    <div class="check"></div>
  </li>
</ul>

Я пытался использовать это:

$('.type label').on('click', function(e) {
  e.preventDefault();
  $('.type input').addClass('checked').siblings().removeClass('checked');
})

Но так как он принадлежит другому родительскому тегу , поэтому он не будет удалятькласс, когда не отмечен , поэтому я перешел на использование этого:

for (var i = 0; i < label.length; i++) {
  label[i].addEventListener("click", function(e) {
    e.preventDefault();
    input[i].classList.add("checked");
  })
}

Но все еще не работал

(TypeError: Невозможно прочитать свойство 'classList' изundefined)

Есть ли другие способы добавить класс к проверяемому и удалить другие?

Answer 1

Попробуйте это

$('.type input').on('change', function(e) {
  $('.type input').removeClass('checked');
  $(this).addClass('checked');
})

.checked + label {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="list">
  <li class="type">
    <input type="radio" name="selector" id="uberX" value="1">
    <label for="uberX">Uber X</label>
    <div class="check"></div>
  </li>

  <li class="type">
    <input type="radio" name="selector" id="uberSUV" value="2">
    <label for="uberSUV">Uber SUV</label>
    <div class="check"></div>
  </li>

  <li class="type">
    <input type="radio" name="selector" id="uberBlack" value="3">
    <label for="uberBlack">Uber Black</label>
    <div class="check"></div>
  </li>
</ul>

Answer 2

Ваше первое предположение было близко. Это должно сделать это:

$('.type label').on('click', function(e){
    e.preventDefault();

    // Remove the 'checked' class from all of my siblings' input fields (including me):
    $(this).parent().siblings().each(
        function() {
            $(this).find('input').removeClass('checked');
        }
    );

    // Add the 'checked' class to my input field:
    $(this).parent().find('input').addClass('checked');
})