"Radio select stylized with bootstrap button (no css need)"
Bootstrap 3.3.0 Snippet by danielikeda

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 select stylized with bootstrap button (no css need)</h2>
<h3>without change style button (JS V1 - change styles on JS, only two styles at a time)</h3>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<span class="btn btn-primary btn-sm active" data-toggle="estado" data-value="Y">NOVO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estado" data-value="N">USADO</span>
</div>
<input type="hidden" name="estado" id="estado">
</div>
</div>
</div>
<br><br>
<div class="form-group">
<label for="happy" class="col-sm-5 col-md-5 control-label text-right">Estado do produto:</label>
<div class="col-sm-7 col-md-7">
<div class="input-group">
<div id="radioBtn" class="btn-group">
<span class="btn btn-primary btn-sm active" data-toggle="estadotwo" data-value="Y">NOVO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadotwo" data-value="N">USADO</span>
<span class="btn btn-default btn-sm notActive" data-toggle="estadotwo" data-value="Q">QUEBRADO</span>
</div>
<input type="hidden" name="estadotwo" id="estadotwo">
</div>
</div>
</div>
</div>
<br><br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
// Use only for V1
$('#radioBtn span').on('click', function(){
var sel = $(this).data('value');
var tog = $(this).data('toggle');
$('#'+tog).val(sel);
// You can change these lines to change classes (Ex. btn-default to btn-danger)
$('span[data-toggle="'+tog+'"]').not('[data-value="'+sel+'"]').removeClass('active btn-primary').addClass('notActive btn-default');
$('span[data-toggle="'+tog+'"][data-value="'+sel+'"]').removeClass('notActive btn-default').addClass('active btn-primary');
});
// Use only for V2
$('#radioBtnV2 span').on('click', function(){
var sel = $(this).data('value');
var tog = $(this).data('toggle');
var active = $(this).data('active');
var classes = "btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link";
var notactive = $(this).data('notactive');
$('#'+tog).val(sel);
$('span[data-toggle="'+tog+'"]').not('[data-value="'+sel+'"]').removeClass('active '+classes).addClass('notActive '+notactive);
$('span[data-toggle="'+tog+'"][data-value="'+sel+'"]').removeClass('notActive '+classes).addClass('active '+active);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Animated Radio tab
Hexa shape button
Modal Quiz with Radio button

Questions / Comments:

Hello,
I'm using JS V1 version.
How can I use jQuery Validation method?
The Validation not work with hidden input.

This is my code

<div id="radioBtn" class="btn-group pull-right radio-group">
SI
NO
<input type="hidden" name="disp_mattina" id="disp_mattina">
</div>

Luca Lo Bascio () - 8 years ago - Reply 0

Try capture element with this Jquery Code:
$('input[type=hidden][name=disp_mattina]').on('change',function(){
// Your validate method here.
// Get value of this element:
// $(this).val();
});

Daniel Ikeda () - 7 years ago - Reply 0