javascript - Bootstrap 按钮组 + 单选按钮，检查值在使用 jQuery 的 Firefox 中不起作用

Question

我正在使用 Bootstrap 构建一个网站，并使用覆盖在单选按钮顶部的按钮组来根据选中的单选按钮加载某些内容。我检查单选按钮中的 value 属性来决定加载哪些内容(使用 jQuery)。这是 JSFiddle 的相同内容。

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

如果您在 Chrome 中运行此命令，那么您会在警报提示中获得单选按钮值。

如果您在 Firefox 中运行此命令，则会在警报提示中收到“未定义”。

任何原因，为什么 FF 会这样，或者我做错了什么。

提前致谢!

Answer 1

这对 Chrome 有效的原因是它会触发 click 事件直至 input:radio 级别，而 Firefox 没有这种行为。

据我所知，Bootstrap 不处理按钮和嵌套输入单选按钮之间的此功能。因此，您必须在单击 Bootstrap 样式的按钮时设置 input:radio 按钮的选中属性。

$('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/