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>
     <div id="test1" class="lgbuttons"></div>
     <div id="test2" class="lgbuttons"></div>
     <div id="test3" class="lgbuttons"></div>
     <div id="test11" class="lgbuttons"></div>
     <div id="test12" class="lgbuttons"></div>
     <div id="test13" class="lgbuttons"></div>
     <div id="test4" class="hmlbuttons"></div>
     <div id="test5" class="hmlbuttons"></div>
     <div id="test6" class="hmlbuttons"></div>  
</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;
}

.hml-0.ui-state-active
{
    background: #ff0000 !important;
}

.hml-1.ui-state-active
{
    background: #ff9900 !important; 
}


.hml-2.ui-state-active
{
    background: #00cc00 !important; 
}


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

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

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

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

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

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

JavaScript

function lossGain(elements) {

    elements.each(function() {
        var element = $(this);
        var id = element.attr("id");
        element.addClass("radio");
        labels = ["Major Loss", "Moderate Loss", "Minor Loss", "Neutral", "Minor Gain", "Moderate Gain", "Major Gain"];
        for (i = 0; i < 7; i++) {
            element.append('<input type="radio" id="' + id + '-radio' + i + '" name="' + id + '-radio" /><label class="lg-' + i + '" for="' + id + '-radio' + i + '">' + labels[i] + '</label>');
        }

        element.find('#' + id + '-radio3').attr("checked", "checked");
    });
}

function hml(elements) {

    elements.each(function() {
        var element = $(this);
        var id = element.attr("id");
        element.addClass("radio");
        labels = ["Low", "Medium", "High"];
        for (i = 0; i < 3; i++) {
            element.append('<input type="radio" id="' + id + '-radio' + i + '" name="' + id + '-radio" /><label class="hml-' + i + '" for="' + id + '-radio' + i + '">' + labels[i] + '</label>');
        }

        element.find('#' + id + '-radio0').attr("checked", "checked");
    });
}

$(function() {
    lossGain($(".lgbuttons"));
    hml($(".hmlbuttons"));
    
    $(".radio").buttonset().find("label").mouseup(function() {
        $(this).siblings().removeAttr("checked");
        $(this).prev().attr("checked","checked").button("refresh");
    });
});