Bootstrap 4 Beta：检查 btn-group 上的哪个项目被选中答案

【问题标题】：Bootstrap 4 Beta: check which item on btn-group is checkedBootstrap 4 Beta：检查 btn-group 上的哪个项目被选中
【发布时间】：2017-10-18 11:56:45
【问题描述】：

关于引导程序 4：

我有一个带有三个单选按钮的 btn 组，其中一个是在页面加载时预先选择的。我想根据所选按钮执行一些操作 - 但我无法执行。

到目前为止，这是我的代码：

<div class="btn-group btn-group-sm mb-2" id="container__Direction" role="group" data-toggle="buttons">

  <label class="btn btn-group-btn active">
    <input type="radio" data-toggle="button" id="input__Direction_Return" checked /> &lt;--&gt; Return
  </label>
  <label class="btn btn-group-btn">
    <input type="radio" data-toggle="button" id="input__Direction_OneWay" /> --&gt; One way
  </label>
  <label class="btn btn-group-btn">
    <input type="radio" data-toggle="button" id="input__Direction_MultiStop" /> -&gt;-&gt; Multi Stop
  </label>

</div>

<!-- Hide this Div if "OneWay" is selected -->    
<div id="container__Inbound_Date">
  <label for="input__Date">Date:</label><br/>
  <input type="date" id="input__Date" />
</div>


$('#input__Direction_OneWay').on('click', function () {
    if ($(this).is(':checked')) {
       $("#container__Inbound_Date").hide();
    }
});

小提琴：https://jsfiddle.net/SchweizerSchoggi/ax85208e/2/

选择 btn "OneWay" 时，应隐藏 btn-group 下面的 Div。

【问题讨论】：

标签： jquery bootstrap-4

【解决方案1】：

您需要为所有单选按钮添加name 属性（相同）。然后使用change() 而不是on('click')。

$('input[name=YourName]').change(function() {
if ($(this).attr('id') == 'input__Direction_OneWay') {
    $("#container__Inbound_Date").hide();
   }
});

【讨论】：

描述得很好，就像一个魅力 - 感谢您花时间在这上面！

【解决方案2】：

你可以像下面这样在jquery中使用

$(".btn").first().button("toggle");

您可以使用下面的代码进行点击事件

$( document ).on( "click", "#input__Direction_OneWay", function() {
     alert( "Goodbye!" );
});

【讨论】：