JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" class="type-interior">
<div data-role="header" data-theme="b" >
<h1>Page 1</h1>
<a data-role="button" data-icon="home" href="#page2" data-rel="Page2" >Page 2</a>
</div> <!-- /header -->
<div data-role="content">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" align="center" name="radio-view1" id="radio-view-a1" checked="checked" value="A"><label for="radio-view-a1">Oilfield</label>
<input type="radio" name="radio-view1" id="radio-view-b1" value="B"><label for="radio-view-b1">Metric</label>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page2" class="type-interior">
<div data-role="header" data-theme="b" >
<h1>Page 2</h1>
<a data-role="button" data-icon="home" href="#page1" data-rel="page1" >Page 1</a>
</div> <!-- /header -->
<div data-role="content">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" align="center" name="radio-view2" id="radio-view-a2" checked="checked" value="A"><label for="radio-view-a2">Oilfield</label>
<input type="radio" name="radio-view2" id="radio-view-b2" value="B"><label for="radio-view-b2">Metric</label>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
<script>
$("input[type='radio']").bind( "change", function() {
mySelection = $(this).val();
//alert(mySelection);
if (mySelection ==...