Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save canuk/7017679 to your computer and use it in GitHub Desktop.
Save canuk/7017679 to your computer and use it in GitHub Desktop.
Use jQuery for Bootstrap 3 new radio buttons btn-group.
<form>
<div class="btn-group" data-toggle-name="is_private" data-toggle="buttons" >
<label class="btn btn-default">
<input type="radio" name="private" value="1"> Yes
</label>
<label class="btn btn-default">
<input type="radio" name="private" value="0"> No
</label>>
</div>
<input type="hidden" name="is_private" value="0" />
</form>
$(function() {
$('div.btn-group[data-toggle-name]').each(function() {
var group = $(this);
var form = group.parents('form').eq(0);
var name = group.attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
$('label', group).each(function() {
var button = $(this).find('input[type="radio"]');
$(this).on('click', function() {
hidden.val($(this).val());
});
if (button.val() == hidden.val()) {
$(this).addClass('active');
}
});
});
});
@josephwaiguru
Copy link

does the label have a value ? I think line 10 should be hidden.val(button.val());

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment