Bootstrap 4测试版：检查btn-group上的哪个项目被选中

Question

关于引导程序4：

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

以下是我到目前为止的代码：

<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://jsfidle.net/schweizerschoggi/ax85208e/2/

当选择btn“OneWay”时，btn-group下面的Div应该隐藏。

Answer 1

您可以在jquery中使用，如下所示

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

您可以在下面的代码中使用click事件

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

Answer 2

您需要向所有单选按钮添加name属性（这是相同的）。然后使用change()代替on('click')。

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