Javascript jQuery在两个单选按钮上切换背景色

对于bootstrapHTML表单，我使用了两个单选框，它们看起来像使用按钮类的按钮。当我单击第一个单选按钮时，它将显示黑色背景色，第二个单选按钮的背景色应变为浅灰色。非常感谢您的帮助

$（文档）.ready（函数（）{
$（“#order1”）。单击（函数（）{
$（“#order1+label”）.css（“背景色”，“#000000”）；
$（“订单2+标签”）.css（“背景色”、“D3”）；
});
$（“#boo2”）。单击（函数（）{
$（“#order2+标签”）.css（“背景色”，“#000000”）；
$（“订单1+标签”）.css（“背景色”，“D3”）；
});
});

替换集
整套
您可以这样做：

$(document).ready(function() {
  $("input[id^=order]").click(function() {
    $("input[id^=order]").parent().css("background-color", "#d3d3d3");
    $(this).parent().css("background-color", "#000000");
  });
});

$（“输入[id^=order]”
表示
id
以
order
开头的所有输入。
由于
标签
是
输入
的父项，因此我们需要使用
.parent（）

同样，这样做将使您的代码具有动态性，因此，如果您添加了更多的输入，就不必添加更多的代码

演示


$（文档）.ready（函数（）{
$（“输入[id^=order]”。单击（函数（）{
$（“输入[id^=order]”）.parent（）.css（“背景色”，“#d3”）；
$（this.parent（）.css（“背景色”，“000000”）；
});
});

替换集
整套
试试这个


$（文档）.ready（函数（）{
$（“#order1”）.change（函数（）{
$（“#order1”）.closest（'label'）.css（“背景色”，“#000000”）；
$（“#order2”）.closest（'label'）.css（“背景色”，“#d3”）；
});
$（“#order2”）.change（函数（）{
$（“#order2”）.closest（'label'）.css（“背景色”，“#000000”）；
$（“#order1”）.closest（'label'）.css（“背景色”，“#d3”）；
});
});

替换集
整套
你应该总是考虑为你的代码解决OP的问题留下一个解释。但是当我使用更多的输入时，它就复杂了。每次我都需要为你的代码手动定义thx:）它的工作fyn:）但问题是颜色的改变只在不使用时执行。当在{}标签和单选框内使用div时，其working@Jano我已经将引导添加到演示中，因为我猜您正在使用引导，而且看起来一切都很好。@Carsten Løvbo Andersen毫无疑问，您的代码看起来很好，工作正常。但是在使用这个div->its not时，它似乎没有除法，只有它的工作working@Jano那不是我的那个部门吗？