文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery在两个单选按钮上切换背景色

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

Stack Overflow用户

提问于 2020-08-28 05:45:44

回答 2查看 114关注 0票数 0

对于引导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

回答 2

Stack Overflow用户

发布于 2020-08-28 05:49:46

你可以这样做：

$(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>

票数 1

Stack Overflow用户

发布于 2020-08-28 05:53:19

尝尝这个。

$(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63628109

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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