JSFiddle - React, Tailwind, and code Playground

by vinomarky

HTML

<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css">
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-beta.1/docs/_assets/css/jqm-docs.css">
<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" >
    <div class="content-primary">

<p class="normalText">Page 1 Text</p>
</div>



<fieldset data-role="controlgroup" data-type="horizontal" >
    <input type="radio" align="center" name="radio-view1" id="radio-view-a1" checked="checked" >
        <label for="radio-view-a1">Oilfield</label>
    <input type="radio" name="radio-view1" id="radio-view-b1" >
        <label for="radio-view-b1">Metric</label>
</fieldset>

        </div>
    </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" >

        </div>


<fieldset data-role="controlgroup" data-type="horizontal" >
                 <input type="radio" align="center" name="radio-view2" id="radio-view-a2" checked="checked">
                     <label for="radio-view-a2">Oilfield</label>
                 <input type="radio" name="radio-view2" id="radio-view-b2" >
                     <label for="radio-view-b2">Metric</label>
</fieldset>

        </div>
    </div><!-- /content -->
    </div><!-- /page -->

JavaScript

$('#radio-view-a1').on('click', function() {
    $('#radio-view-a1').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked', false).checkboxradio("refresh");
    updown_toggle_units2oilfield();
});
$('#radio-view-b1').on('click', function() {
    $('#radio-view-a1').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked', true).checkboxradio("refresh");
    updown_toggle_units2metric();
});
$('#radio-view-a2').on('click', function() {
    $('#radio-view-a1').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked', false).checkboxradio("refresh");
    updown_toggle_units2oilfield();
});
$('#radio-view-b2').on('click', function() {
    $('#radio-view-a1').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-b1').attr('checked', true).checkboxradio("refresh");
    $('#radio-view-a2').attr('checked', false).checkboxradio("refresh");
    $('#radio-view-b2').attr('checked', true).checkboxradio("refresh");
    updown_toggle_units2metric();
});