jQuery在两个单选按钮上切换背景颜色答案

【问题标题】：jQuery toggle background color on two radio buttonsjQuery在两个单选按钮上切换背景颜色
【发布时间】：2020-12-17 01:16:04
【问题描述】：

对于 Bootstrap HTML 表单，我使用了两个单选框，使用按钮类设计为看起来像按钮。当我单击第一个单选按钮时，它将显示黑色背景颜色，第二个单选按钮背景颜色应变为浅灰色。非常感谢任何帮助！

$(document).ready(function () {
        $("#order1").click(function () {
            $("#order1 + label").css("background-color", "#000000");
            $("#order2 + label").css("background-color", "#d3d3d3");
        });
        $("#boo2").click(function () {
            $("#order2 + label").css("background-color", "#000000");
            $("#order1 + label").css("background-color", "#d3d3d3");
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle"  role="group" aria-label="Kit" data-toggle="buttons">                                     
   <label for="order1" class="btn btn-secondary">
      <input type="radio" name="order_set" id="order1">Replacement Set
   </label>
   <label for="order2" class="btn btn-secondary">
      <input type="radio" name="order_set" id="order2">Complete Set
   </label>
 </div>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

你可以这样做：

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

$("input[id^=order]") 表示id 以order 开头的所有输入。由于label 是input 的父级，那么我们需要使用.parent()

这样做也会使您的代码动态化，因此如果您添加更多输入，则无需添加更多代码。

演示

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" role="group" aria-label="Kit" data-toggle="buttons">
  <label for="order1" class="btn btn-secondary">
<input type="radio" name="order_set" id="order1">Replacement Set
</label>
  <label for="order2" class="btn btn-secondary">
<input type="radio" name="order_set" id="order2">Complete Set
</label>
</div>

【讨论】：

dude thx 为您的代码 :) 它的工作 fyn :) 但问题是只有在没有
的情况下使用时才会执行颜色更改。在 {
} 标签和单选框内使用 div 时，它不起作用
@Jano 我已经在演示中添加了引导程序，因为我猜你正在使用引导程序，看起来一切正常。
@Carsten Løvbo Andersen 毫无疑问，您的代码看起来不错并且可以正常工作。但它似乎没有分裂只有它的工作
当使用这个 div ->
它不是工作
@Jano 和我的 div 不一样？

【解决方案2】：

试试这个。

$(document).ready(function () {
    $("#order1").change(function () {
        $("#order1").closest('label').css("background-color", "#000000");
        $("#order2").closest('label').css("background-color", "#d3d3d3");
    });
    $("#order2").change(function () {
        $("#order2").closest('label').css("background-color", "#000000");
        $("#order1").closest('label').css("background-color", "#d3d3d3");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle"  role="group" aria-label="Kit" data-toggle="buttons">                                     
<label for="order1" class="btn btn-secondary">
<input type="radio" name="order_set" id="order1">Replacement Set
</label>
<label for="order2" class="btn btn-secondary">
<input type="radio" name="order_set" id="order2">Complete Set
</label>
</div>

【讨论】：

您应该始终考虑解释为什么您的代码解决了 OP 的问题。
谢谢它的工作。但是当我使用更多的输入时，它就会变得复杂。每次我都需要手动定义