CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3
Maometto
Maometto

Reputation: 84

html form with Bootstrap togglabe tabs by radio buttons

UPDATE 1:

Tabs isn't working after using the solution on the first reply
JSFiddle

Original question:

I have a problem with bootstrap togglable tabs and radio buttons, when I switch between tabs radio button won't be checked

<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/

Upvotes: 2

Views: 3959

Answers (2)

arkadij_ok
arkadij_ok

Reputation: 505

I have a solution for better than the answers! Just a few lines JS.

And link on 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>

Upvotes: 1

karthik E
karthik E

Reputation: 92

Just add the below jQuery code:

$(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');
    });
});

Working example: JSFiddle

Upvotes: 6

Related Questions