BS btn-group radios not checked

by Thomas RICHARD

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
    
      <h5>Will not set .active on the right item (initial one will be set):</h5>
      <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons">
        <div class="form-check btn btn-light">
          <label class="form-check-label" for="fruit1">cucumber</label>
          <input type="radio" name="veggie" value="cucumber" class="form-check-input" id="veggie1" />
        </div>
        <div class="form-check btn btn-light active">
          <label class="form-check-label" for="fruit2">cabbage</label>
          <input type="radio" name="veggie" value="cabbage" class="form-check-input" id="veggie2" checked />
        </div>
        <div class="form-check btn btn-light">
          <label class="form-check-label" for="fruit3">spinach</label>
          <input type="radio" name="veggie" value="spinach" class="form-check-input" id="veggie3" />
        </div>
      </div>
      
    </div>
  </div>
  <div class="row">
    <div class="col-12">
    
      <h5>Will update correctly thanks to the added JS</h5>
      <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons">
        <div class="form-check btn btn-light">
          <label class="form-check-label" for="fruit1">banana</label>
          <input type="radio" name="fruit" value="banana" class="form-check-input" id="fruit1" />
        </div>
        <div class="form-check btn btn-light">
          <label class="form-check-label" for="fruit2">pear</label>
          <input type="radio" name="fruit" value="pear" class="form-check-input"...

CSS

h5 {
  margin-top: 2rem;
}

JavaScript

// Update .active according to inner :checked for fruits
// Requires not to set any .form-check as .active
$('input[name="fruit"]:checked').parent().addClass('active');

// Update input :checked status on change
$('input').change(displayRadioStatus);
// Show initial input checked status
displayRadioStatus();

function displayRadioStatus() {
	$('#result').text('');
  $('input').each(function() {
    $('#result').append($(this).val() + ' ' + $(this).prop('checked') + '\n');
  });
}