选中 jQuery 单选按钮，else 语句不起作用

Question

我希望输入在选中时更改其样式（添加背景颜色）。这是有效的，但是，在未检查输入单选类型时删除背景颜色的 else 语句不起作用。

已经尝试了各种不同的方法，但是当您单击不同的输入时无法触发 else 语句。

HTML：

<tr style="color:white;">
<td id="test" style="background-color:rgb(153, 117, 82);" value="1">
<label><input type="radio" name="c0" class="c0" value="10" onclick="output();" id="t"/>1</label>
</td>
</tr>

<tr style="color:white;">
<td style="background-color: rgb(255, 57, 57);">
<label><input type="radio" name="c0" class="c0" value="20" onclick="output();" id="t"/>2</label>
</td>

JS：

$('input#t').on("click", function() {
if ($("input#t").is(':checked')) {
    $(this).parent().addClass("active");
} 
    else {
    $(this).parent().removeClass("active");
}
});

codepen：https://codepen.io/Not_A_Fax_Machine/pen/zzRMNZ/

Answer 1

问题在于您有两个具有相同 id 属性的元素 - 它们必须是唯一的。

要解决此问题，请使用类对单选按钮进行分组，然后使用 this 关键字来引用 change 事件处理程序中的元素。试试这个：

$('.t').on("change", function() {
  $('label').removeClass('active');
  $(this).parent().toggleClass('active', this.checked);
  // output();
});

tr {
  color: white;
}

td.foo {
  background-color: rgb(153, 117, 82);
}

td.bar {
  background-color: rgb(255, 57, 57);
}

.active {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="foo">
      <label><input type="radio" name="c0" class="t c0" value="10" />1</label>
    </td>
  </tr>
  <tr>
    <td class="bar">
      <label><input type="radio" name="c0" class="t c0" value="20" />2</label>
    </td>
  </tr>
</table>

注意删除内联样式，应该避免。