Bootstrap 3 - Radio Button Group - JSFiddle

by Adam Mendoza

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form >
    <div class="row">
        <div class="col-sm-3">Test 1 - Bootstrap</div>
        <div class="col-sm-9">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" id="q156" name="quality[25]" value="1" /> 1
                </label> 
                <label class="btn btn-default">
                    <input type="radio" id="q157" name="quality[25]" value="2" /> 2
                </label> 
                <label class="btn btn-default">
                    <input type="radio" id="q158" name="quality[25]" value="3" /> 3
                </label> 
                <label class="btn btn-default">
                    <input type="radio" id="q159" name="quality[25]" value="4" /> 4
                </label> 
                <label class="btn btn-default active">
                    <input type="radio" id="q160" name="quality[25]" checked="checked" value="5" /> 5
                </label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">Test 2 - No Bootstrap</div>
        <div class="col-sm-9">
            <div  >
                <label >
                    <input type="radio" id="q128" name="quality[21]" value="1" /> 1
                </label> 
                <label >
                    <input type="radio" id="q129" name="quality[21]" checked="checked" value="2" /> 2
                </label> 
                <label >
                    <input type="radio" id="q130" name="quality[21]" value="3" /> 3
                </label> 
                <label >
                    <input type="radio" id="q131" name="quality[21]" value="4" /> 4
                </label> 
                <label >
  ...

JavaScript

$("form").submit(function() {
    console.log($(this).serializeArray());
    return false;
});