Jquery 更改所选分组单选按钮的背景

我有一个单选按钮组，我需要更改所选按钮的背景色

MySQLi查询返回单选按钮值，如果该值为“0”，则将所选按钮的背景颜色更改为“红色”，并将另一个按钮更改为“灰色”

我已经检查以确保查询返回我期望的数据，它确实返回了。加载表单时，错误的单选按钮（按钮1）始终显示为选中

每个州都有一个CSS类：

var mb=result[15]；
如果（mb==1）{
//如果查询返回“1”，则按钮1
控制台日志（“主板显示”，mb）；
$（'EditDisplayMainBoard'u 1'）.prop（'checked'，true）；
如果（$（'#EditDisplayMainBoard_1'）。是（':checked'））{
$（“EditDisplayMainBoard_1”）
.parent（）
.removeClass（'btn btn主窗体检查标签'）
.addClass（'btn btn主配置表单检查标签'）；
}
}否则{
//如果查询返回“0”，则按钮2
控制台日志（“主板显示”，mb）；
$（'EditDisplayMainBoard'u 0'）.prop（'checked'，true）；
如果（$（'#EditDisplayMainBoard_0'）是（':checked'））{
$（“EditDisplayMainBoard_0”）
.parent（）
.removeClass（'btn btn主窗体检查标签'）
.addClass（'btn btn主配置表单检查标签'）；
}
}

.btn主{
颜色：#333333；
背景色：#中交；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：11px；
宽度：175px；
文本对齐：居中；
高度：13px；
边界半径：0！重要；
边框：0.5px实心#CCC！重要；
页边顶部：1px；
}
.btn主配置{
颜色：#333333；
背景色：#990000；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：11px；
宽度：175px；
文本对齐：居中；
高度：13px；
边界半径：0！重要；
边框：0.5px实心#CCC！重要；
页边顶部：1px；
}

展示
炫耀

我已经重新格式化了你的帖子。现在，您可以清楚地看到出了什么问题：

HTML中的按钮如下所示：

<label class="btn btn-primary form-check-label active">
  Display On
  <span class="rhidden">
    <input type="radio" name="BoardLevel" value="1" id="EditDisplayMainBoard_1">
  </span>
</label>

还请注意，您不必删除并重新添加

btn

和

表单检查标签

类，因此我也删除了这些类

--

请注意：

我格式化HTML的方式（为了可读性）在

文本上的
显示与
span
和
输入
元素之间引入了一些空白。这可能在最终网页上显示为空格。如果您不想这样做，最简单的解决方案是再次删除空白

如果要检查哪些元素正在更改其类，可以在DOM查看器中检查这些元素。几乎每个浏览器都有一个。右键单击元素并选择“Inspect element”或类似内容，或者在Firefox或Chrome上按F12打开开发人员工具并转到“Inspector”或“DOM Viewer”选项卡，然后在那里找到您的元素并验证您是否更改了正确的元素

新代码无法工作的原因与旧代码无法工作的原因相同：您没有选择正确的元素（需要两个

.parent（）

调用）

---

我所能看到的就是改变EditDisplayMainBoard_1。您想在哪里更改EditDisplayMainBoard_0的状态？@Farhad Mehrad感谢您的查找。我已经更改了if-else语句中的代码。我的错误是，它现在应该是有意义的。在构建html时，您是否应该使用服务器端语言来设置活动类和选中状态？否则，

结果[15]

从何而来？另外，在你们检查完收音机之后，若直接使用if有什么意义？你们只是检查了它，所以你们不需要检查它是否被检查过。最后，您只需删除和添加相同的类，为什么不添加活动类呢？您不需要.prop（'checked'，true）。在这两种情况下都将其拆下。然后检查if语句。然后在.removeClass和.addClass中只添加或删除btn主类和btn主类，而不是整个类。“希望能有帮助。”法哈德·梅哈德再次问好。我已经更改了代码，并将其插入到新代码下的帖子中。但这仍然不起作用，我不明白为什么，有什么想法。大家好，非常感谢你们抽出时间来研究这个问题。很好地工作，正如您指出的，是缺少的.parent（）.parent（）。再次感谢。

var mb = result[15];
if (mb == 1) { 
  // BUTTON 1 IF QUERY RETURNS "1"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_1').prop('checked', true);

  if ($('#EditDisplayMainBoard_1').is(':checked')) {
    $("#EditDisplayMainBoard_1")
      .parent().parent()
      .removeClass('btn-primary')
      .addClass('btn-primary-conf');
  }
} else { 
  // BUTTON 2 IF QUERY RETURNS "0"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_0').prop('checked', true);

  if ($('#EditDisplayMainBoard_0').is(':checked')) {
    $("#EditDisplayMainBoard_0")
      .parent().parent()
      .removeClass('btn-primary')
      .addClass('btn-primary-conf');
  }
}