<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Radio para escolha de CPF ou CNPJ na nota</h2>
<div class="form-group">
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn radio-selector btn-sm active" data-toggle="happy" data-title="Y">CPF</a>
<a class="btn radio-selector btn-sm notActive" data-toggle="happy" data-title="N">CNPJ</a></a>
</div>
<input type="hidden" name="happy" id="happy">
</div>
</div>
</div>
<br />
</div>
<br/>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h2 class="panel-title">Como usar?</h2></div>
<div class="panel-body">
<p><img src="http://f.cl.ly/items/0E3v0X0k0Q2y0n19091R/Screen%20Shot%202014-06-24%20at%207.09.41%20PM.png"></p>
<p>Botão padrão com texto: "Inserir CPF/CNPJ na nota" (mudar o texto cpf ou cnpj conforme o tipo escolhido)</p>
</div>
</div>
</div>
<br /><br />
<div class="row">
<h2>Radio para escolha de sabor de tortinha</h2>
<div class="form-group">
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn radio-selector btn-sm notActive" data-toggle="happy" data-title="Y">Torta de Maça</a>
<a class="btn radio-selector btn-sm notActive" data-toggle="happy" data-title="N">Torta de Banana</a></a>
</div>
<input type="hidden" name="happy" id="happy">
</div>
</div>
</div>
<br /><br />
</div>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h2 class="panel-title">Como usar?</h2></div>
<div class="panel-body">
<p>Centralizado abaixo do botão do PayPal</p>
<p>Nenhum item selecionado de Padrão</p>
<p><img src="http://f.cl.ly/items/1r3Z0b1m1m3M2K0u0H17/Screen%20Shot%202014-06-25%20at%2010.40.06%20AM.png"></p>
<p>Validação no botão do PayPal para passar só com algo selecionado.</p>
<p><img src="http://f.cl.ly/items/0S3O210t283T3E3y1Y3H/Screen%20Shot%202014-06-25%20at%2010.39.51%20AM.png"></p>
<p>Hover #f1f1f1.</p>
</div>
</div>
</div>
</div>
#radioBtn .radio-selector.active{
color: #fff;
background-color: #C1272D; /* Mudar para @primaryColor */
border-color: #811113; /* Mudar para @primaryColorHover */
}
#radioBtn .radio-selector.notActive{
color: #811113;
background-color: #fff; /* Light & Dark, usar variavel #fff do light (Talvez tem que criar uma variavel chamada plainColor que é #fff no light e #000 no dark) */
border-color: #811113; /* Mudar para @primaryColorHover */
}
#radioBtn .radio-selector.notActive:hover{
background-color: #f1f1f1; /* Light & Dark, usar variavel #f1f1f1 do light (@moreInfoBackgroundColor) */
}
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
