Bootstrap Radio Button Group jQuery Toggle

by JonathanN

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="btn-group col-md-2" data-toggle="buttons">
    <label class="btn btn-gender btn-default active">
        <input type="radio" id="genderF" name="gender" value="female"> Girls
    </label>
    <label class="btn btn-gender btn-default">
        <input type="radio" id="genderM" name="gender" value="male"> Guys
    </label>
</div>
<div id="message">
</div>

JavaScript

var toggleRadioButton = function ($parent, name, value) {
  var $allButtons = $parent.find('input[name="' + name + '"]');
  $allButtons.prop('checked', false);
  $allButtons.parents('label.btn').removeClass('active');
  var $targetButton = $parent.find('input[name="' + name + '"][value="' + value + '"]');
  $targetButton.prop('checked', true);
  $targetButton.parents('label.btn').addClass('active');
};

$(function() {
	setTimeout(function() {
  	var $group = $('.btn-group');
  	toggleRadioButton($group, 'gender', 'male');
    var value = $('input[name="gender"]:checked').val();
    $('#message').html('toggled to ' + value);
  }, 1000);
});