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

在添加到当前类之前，您必须从其他类中删除类。触发器仅针对该元素触发，因此检查将针对该元素而不是其他元素运行。 更新链接： 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/