javascript - 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>

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

标签： javascriptjqueryhtml

Answer 1

您只是从选定 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/