JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">
	<div class="row">
		<h1>Radio Group #1</h1>
  		<label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
  	</div>
    <div class="row">
		<h1>Radio Group #2</h1>
      <form class="form">
		<label for="year" class="control-label input-group">Year</label>
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-default">
				<input name="year" value="2011" type="radio">2011
			</label>
			<label class="btn btn-default">
				<input name="year" value="2012" type="radio">2012
			</label>
			<label class="btn btn-default">
				<input name="year" value="2013" class="active" type="radio">2013
			</label>
        </div><button type="submit" class="btn btn-default">Submit</button></form>
</div>
</div>

JavaScript

$('form').submit(function(){
    //alert($('input[name=year]:checked').val());
  
  	console.log($(this).serialize());
  
    return false;
});