Using radio buttons for tab control using bootstrap

Using radio buttons for tab control using bootstrap

I am trying to control tabs with radio buttons to change a content area for a scheduling screen. This works fine other than the radio buttons do not check.
Anyone got any ideas how to fix this?


Here is the example in jsfiddle


Solution 1:

The radio buttons aren’t getting checked because of this code:


To fix this, remove data-toggle="tab" from the radio buttons and then add this jQuery code:

$('input[name="intervaltype"]').click(function () {

Solution 2:

Try this works for me

<script src=""></script>
<link href="" rel="stylesheet" type="text/css" />

<div class="container">
	<div class="row">
		<div class="span12">
			<p class="lead">Bare minimum radio button tabs example:</p>

			<div id="tab" class="btn-group" data-toggle="buttons">
				<a href="#prices" class="btn btn-default active" data-toggle="tab">
                    <input type="radio" />Prices</a>
				<a href="#features" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Features</a>
				<a href="#requests" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Requests</a>
				<a href="#contact" class="btn btn-default" data-toggle="tab">
                    <input type="radio" />Contact</a>

			<div class="tab-content">
				<div class="tab-pane active" id="prices">Prices content</div>
				<div class="tab-pane" id="features">Features Content</div>
				<div class="tab-pane" id="requests">Requests Content</div>
				<div class="tab-pane" id="contact">Contact Content</div>

Related:  Bootstrap 4 card-deck with number of columns based on viewport