Радио - добавить класс в div, когда проверено

Question

Как добавить класс добавления в JS в div или таблицу, когда проверяется радиовход?

Я хотел бы добавить класс selected-table , div class = "table-item" , когда я проверял радиовход.

$(".table-item input").change(function() {
  var div = $(this).closest('.table-item');
  $(this).is(":checked") ? div.addClass("table-selected") : div.removeClass("table-selected");
});

#test .table-item {
  border: solid 1px #666;
  height: 25px;
  background-color: #CCC
}

#test .table-selected {
  border: 1 px solid #F00;
  background-color: #00F
}

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

  <div class="table-item">
    <div><label for="check1"><input type='radio' name='rad' value='1'>1</label></div>
  </div>
  <div class="table-item">
    <div><label for="check2"><input type='radio' name='rad' value='2'>2</label></div>
  </div>
  <div class="table-item">
    <div><label for="check3"><input type='radio' name='rad' value='3'>3</label></div>
  </div>

</div>

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

Answer 1

Вы должны удалить класс из других, прежде чем добавлять в текущий. Триггеры срабатывают только для этого элемента, поэтому проверка будет выполняться для этого элемента, а не для других. Ссылка для обновления: https://jsfiddle.net/m637ndrx/2/

 $(".table-item input").change(function() {
  var div = $(this).closest('.table-item');
  $('.table-item').removeClass("table-selected")
  $(this).is(":checked") ? div.addClass("table-selected") : div.removeClass("table-selected");
});

Answer 2

Вы просто удаляете класс из выбранного div. Часть else этого троичного условия никогда не будет выполнена, потому что div представляет выбранную вами кнопку.

Вам необходимо удалить класс из всех элементов div.

$(".table-item").removeClass('table-selected');
var div = $(this).closest('.table-item');
if ($(this).is(":checked")) {
  div.addClass("table-selected");
}

Проверьте здесь: https://jsfiddle.net/g5o2w47v/

Answer 3

Вам нужно очистить все div и затем добавить класс, если отмечено:

$(".table-item input").change(function() {
  $(".table-item").removeClass("table-selected")
  var div = $(this).closest('.table-item')
  $(this).is(":checked") && div.addClass("table-selected")
});

#test .table-item {
  border: solid 1px #666;
  height: 25px;
  background-color: #CCC
}

#test .table-selected {
  border: 1 px solid #F00;
  background-color: #00F
}

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

  <div class="table-item">
    <div><label for="check1"><input type='radio' name='rad' value='1'>1</label></div>
  </div>
  <div class="table-item">
    <div><label for="check2"><input type='radio' name='rad' value='2'>2</label></div>
  </div>
  <div class="table-item">
    <div><label for="check3"><input type='radio' name='rad' value='3'>3</label></div>
  </div>

</div>