JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Button - Radios</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css" />
</head>
<body>
 
<form>
    <div class="radio">
        <input type="radio" id="radio1" name="radio" checked/><label for="radio1">Low</label>
        <input type="radio" id="radio2" name="radio" /><label for="radio2">Medium</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">High</label>
    </div>
    <div class="radio">
        <input type="radio" id="radio4" name="radio2" /><label class="lg-l3" for="radio4">Major Loss</label>
        <input type="radio" id="radio5" name="radio2"  /><label class="lg-l2" for="radio5">Moderate Loss</label>
        <input type="radio" id="radio6" name="radio2" /><label class="lg-l1" for="radio6">Minor Loss</label>
        <input type="radio" id="radio7" name="radio2" checked/><label class="lg-n" for="radio7">Neutral</label>
        <input type="radio" id="radio8" name="radio2" /><label class="lg-g1" for="radio8">Minor Gain</label>
        <input type="radio" id="radio9" name="radio2" /><label class="lg-g2" for="radio9">Moderate Gain</label>
        <input type="radio" id="radio10" name="radio2" /><label class="lg-g3" for="radio10">Major Pain</label>
    </div>
</form>
 
 
</body>
</html>

CSS

body { padding: 20px; }

.radio {
    margin-bottom: 10px;
    font-size: 12px;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

.lg-l3.ui-state-active
{
    background: #ff0000 !important;    
}

.lg-l2.ui-state-active
{
    background: #ff6600 !important;        
}

.lg-l1.ui-state-active
{
    background: #ff9900 !important;    
}

.lg-g1.ui-state-active
{
    background: #ccff00 !important;    
}

.lg-g2.ui-state-active
{
    background: #66ff00 !important;    
}

.lg-g3.ui-state-active
{
    background: #00cc00 !important;    
}

JavaScript

$(function() {
    $(".radio").buttonset();

    $(".radio label").mouseup(function() {
        $(this).siblings("input").removeAttr("checked");
        $(this).prev().attr("checked", "checked").button("refresh");
    });
});


function lossGain(element) {
    var labels = ['Major Loss',
        'Moderate Loss', 'Minor Loss', 'Neutral', 'Minor Gain', 'Moderate Gain', 'Major Gain'];
    var id = element.id;
    element.append('');
}