"CdE Radio"
Bootstrap 3.1.0 Snippet by iwolney

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

Related: See More


Questions / Comments: