带有Bootstrap togglabe选项卡的html表单，单选按钮

Question

更新1：

在第一次回复中使用解决方案后，标签不起作用
JSFiddle

原始问题：

我在启动可切换标签和单选按钮时遇到问题，当我在标签之间切换单选按钮不会被检查

<form id="frontendEditor" class="col-sm-8 col-sm-offset-2">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="status" checked>
            </a>
        </li>
        <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="post">
            </a>
        </li>
        <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="story">
            </a>
        </li>
        <li role="presentation">
            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
                <input type="radio" name="type" value="novel">
            </a>
        </li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>


</form>

的jsfiddle： https://jsfiddle.net/7xot0jqq/2/

Answer 1

只需添加以下jQuery代码：

$(function () {
    $('input:radio').click(function (e) {
       e.stopPropagation();
       $('li').removeClass('active')
       $(this).parent().parent().addClass('active');
       var tabpane = $(this).parent().attr('aria-controls');
       $('.tab-content').children().removeClass('active');
       $('#' + tabpane).addClass('active');
    });
    $('a').click(function (e) {
       $(this).find("input[type=radio]").trigger('click');
    });
});

工作示例：JSFiddle

Answer 2

我有一个比答案更好的解决方案！只需几行JS。

并链接jsfiddle。

$(function () {
    $('.nav-tabs').on('click', 'a[role=tab] input[type=radio]', function(event) {
        event.stopPropagation();
        $(this).parent().tab('show');
    });
    $('.nav-tabs').on('show.bs.tab', 'a[role=tab]', function() {
        $(this).find('input[type=radio]').prop('checked', true);
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form id="frontendEditor" class="col-sm-8 col-sm-offset-2">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
        <input type="radio" name="type" value="status" checked>
      </a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
        <input type="radio" name="type" value="post">
      </a>
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
        <input type="radio" name="type" value="story">
      </a>
    </li>
    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
        <input type="radio" name="type" value="novel">
      </a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">1</div>
    <div role="tabpanel" class="tab-pane" id="profile">2</div>
    <div role="tabpanel" class="tab-pane" id="messages">3</div>
    <div role="tabpanel" class="tab-pane" id="settings">4</div>
  </div>
</form>