如何将JavaScript应用于引导程序btn组以选择/取消选择子按钮元素

How to apply JavaScript to bootstrap btn-group-justified to select/unselect the children button elements

本文关键字：选择 取消 元素 按钮 JavaScript 应用于 btn 引导程序      更新时间：2023-09-26

好的，我知道JavaScript并没有应用于整个组，因为每个按钮都是不同组的一部分，但文档中说这是使用按钮标签的正确方式。这不是一个问题，除非我需要他们的理由。

所以我的问题是：作为一个整体，我应该如何在所有三个按钮上使用JavaScript？它应该作为一个简单的单选按钮组进行操作。

单击其中一个，其他选项将被取消选择。任何建议都会很棒！

HTML:

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Low Cost/Effeciency</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default active">Average</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">High Cost/Effeciency</button>
  </div>
</div>

JavaScript:

$(function() {
  $('body').on('click', '.btn-group button', function (e) {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    //other things I need to do
  })
});
按钮元素不是同级元素。

您需要选择父元素的同级元素。

此处的工作示例

$(document).on('click', '.btn-group button', function (e) {
  $(this).addClass('active').parent().siblings().find('button').removeClass('active');
});

但是，正确的方法是使用属性data-toggle="buttons"。

在这样做的过程中，您不需要编写任何自定义JS。欲了解更多信息，请参阅我的老答案，解释它是如何工作的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
    <label class="btn btn-default">
        <input type="radio" name="options" />Low Cost/Effeciency
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />Average
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />High Cost/Effeciency
    </label>
</div>

相关文章：