Question

关于Bootstrap 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://jsfiddle.net/SchweizerSchoggi/ax85208e/2/

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

Answer 1

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

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

Answer 2

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

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

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

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

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

2 个答案: