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

$(function() {
	setTimeout(function() {
		$('#genderM').parents('.btn').button('toggle');
    var value = $('input[name="gender"]:checked').val();
    $('#message').html('toggled to ' + value);
  }, 1000);
});