Bootstrap 4 Beta: check which item on btn-group is checked

0
votes

Regarding Bootstrap 4:

I have a btn-group with three radio buttons and one of them is pre-selected on page load. I want to do some action depending on the selected button - but I cannot get it going.

Here is my code so far:

<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();
    }
});

Fiddle: https://jsfiddle.net/SchweizerSchoggi/ax85208e/2/

The Div below the btn-group should be hidden when btn "OneWay" is selected.

2
jquerybootstrap-4

2 Answers

1
votes

You need to add a name attribute (that is the same) to all of your radio buttons. Then use change() instead of on('click').

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

You can used in jquery like as below

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

and you can used below code for click event

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