Radio - 选中时在 div 处添加类

Question

当检查单选输入时，如何将JS中的附加类添加到div或table中？

当我检查无线电输入时，我想将table-selected类添加到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

在添加到当前类之前，您必须从其他类中删除类。触发器仅针对该元素触发，因此检查将针对该元素而不是其他元素运行。&nbsp;更新链接： https:&nbsp;//jsfiddle.net/m637ndrx/2/&nbsp;$(".table-item input").change(function() {&nbsp; var div = $(this).closest('.table-item');&nbsp; $('.table-item').removeClass("table-selected")&nbsp; $(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")) {&nbsp; div.addClass("table-selected");}检查这里： https:&nbsp;//jsfiddle.net/g5o2w47v/