Bootstrap Snippet Sexy Radio Butons using HTML CSS Bootstrap Javascript

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="//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>Use butons to simulate radio butons</h2>
        
        <div class="form-group">
            <label for="happy" class="col-sm-4 col-md-4 control-label text-right">Are you happy ?</label>
            <div class="col-sm-7 col-md-7">
                <div class="input-group">
                    <div id="radioBtn" class="btn-group">
                        <a class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</a>
                    </div>
                    <input type="hidden" name="happy" id="happy">
                </div>
            </div>
        </div>
        <br /><br />
        <div class="form-group">
            <label for="fun" class="col-sm-4 col-md-4 control-label text-right">Is it fun ?</label>
            <div class="col-sm-7 col-md-7">
                <div class="input-group">
                    <div id="radioBtn" class="btn-group">
                        <a class="btn btn-primary btn-sm active" data-toggle="fun" data-title="Y">YES</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
                    </div>
                    <input type="hidden" name="fun" id="fun">
                </div>
            </div>
        </div>
    </div>
    <br /><br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
$('#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');
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sexy Radio Butons"
Bootstrap 3.1.0 Snippet by kobusvanwykk

Related: See More

Questions / Comments:

"Sexy Radio Butons" Bootstrap 3.1.0 Snippet by kobusvanwykk

Related: See More

Questions / Comments:

"Sexy Radio Butons"
Bootstrap 3.1.0 Snippet by kobusvanwykk