Radio - 选中时在 div 中添加类答案

【问题标题】：Radio - add class at div when checkedRadio - 选中时在 div 中添加类
【发布时间】：2020-03-28 17:29:02
【问题描述】：

选中单选输入时，如何将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>

但这工作有些错误，添加类，但未选中时不会删除它

【问题讨论】：

理想情况下，您也应该接受答案。

标签： javascript jquery html

【解决方案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");
});

【讨论】：

【解决方案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/

【讨论】：

这与 OP 的代码相同。你解决了什么问题？
对不起，我的 jsfiddle 链接有误。刚刚更新了正确的链接。