javascript - Radio - 选中时在 div 处添加类

Question

当选中单选输入时，如何在 JS 中向 div 或 table 添加附加类？

我想将 table-selected 类添加到 div class="table-item"当我检查 radio 输入时。

$(".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");
});