Question

I’m building a website using bootstrap and using button groups overlaid on top of radio buttons to load certain content based on which radio button is checked . I check value attribute in radio buttons to decide which content to load (using jQuery). Here is JSFiddle for the same.

http://jsfiddle.net/F2Kr3/1/

If you run this in Chrome then you get radio button values in alert prompts.

If you run this in Firefox then you get “undefined” in alert prompts.

Any reason, why FF is behaving this way or I have done something wrong.

Thanks in advance!

Answer 1

The reason why this works for Chrome is that it triggers the click event down to the input:radio level, while Firefox doesn’t have this kind of behavior.

As far as I know, Bootstrap doesn’t handle this functionality between buttons and nested input radio buttons. So you’ll have to set the checked attribute of the input:radio buttons on click of a Bootstrap styled button.

$('div.btn-group .btn').click(function(){
  $(this).find('input:radio').attr('checked', true);
  alert($('input[name=radio-btn-ctrl]:checked').val());
});

http://jsfiddle.net/3prAu/1/