JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<div class='overall'>
    <input type="checkbox" id="tc_all" />
    <label for="tc_all">No</label>
    <input type="checkbox" id="rush_all" />
    <label for="rush_all">No</label>
</div>
<form name="log_files" id="log_files" method="post" action="/clientarea/uploaded_static.php" enctype="application/x-www-form-urlencoded">
    <table border="0" cellpadding="7" cellspacing="0" id="files">
        <tr class="even">
           
            <td valign="top">
                <div id="servicegroup1" class='service_opts'>
                    <input type="radio" name="service_1_5ce0c0cb8b93df21a8c6ebb2170d6f31" value="Normal" id="radio_4" CHECKED />
                    <label for="radio_4">Normal</label>
                    <br />
                    <input type="radio" name="service_1_5ce0c0cb8b93df21a8c6ebb2170d6f31" value="Rush" id="radio_5" />
                    <label for="radio_5">Rush</label>
                    <br />
                </div>
                <div id="tcopt1">
                    <input type="checkbox" name="TC_1_5ce0c0cb8b93df21a8c6ebb2170d6f31" value="Yes" class="tc_button" id="TCcheck1_1_5ce0c0cb8b93df21a8c6ebb2170d6f31" />
                    <label for="TCcheck1_1_5ce0c0cb8b93df21a8c6ebb2170d6f31">Timecode</label>
                </div>
            </td>
            <td valign="top">
                <div align="center">
                    <select name="style_1_5ce0c0cb8b93df21a8c6ebb2170d6f31" id="style-1">
                        <option value="" SELECTED>Select..</option>
                        <option value="S">Type-1</option>
                        <option value="V">Type-2</option>
                        <option value="FG">Type-3</option>
                        <option value="RAW">Reality TV</option>
                        <option value="RAWT">Reality w/TC</option>
                        <option value="DC">Lite Cont.</option>
                        <option value="DCT">Lite Cont. w/TC</option>
                    </select>
         ...

CSS

.overall .ui-state-active {
    border: 1px solid #333;
    background: #390 50% 50% repeat-x;
    font-weight: bold;
    color: #FFF;
}
.overall .ui-button {
    width: 100px;
    height: 25px;
}
.overall .ui-button .ui-button-text {
    line-height: .5;
}

JavaScript

(function ($) {
    // https://gist.github.com/edersohe/760885
    //plugin buttonset vertical
    $.fn.buttonsetv = function (fixed_width) {
        $(':radio, :checkbox', this).wrap('<div style="margin: 1px"/>');
        $(this).buttonset();
        $('label:first', this).removeClass('ui-corner-left').addClass('ui-corner-top');
        $('label:last', this).removeClass('ui-corner-right').addClass('ui-corner-bottom');
        mw = 0; // max witdh
        $('label', this).each(function (index) {
            w = $(this).width();
            if (w > mw) mw = w;
        })
        $('label', this).each(function (index) {
            //    $(this).width(mw);
            $(this).width(fixed_width);
        })
    };
})(jQuery);
$(function () {
    $("#servicegroup1").buttonsetv(120);
    $("#tcopt1").buttonsetv(120);
    $("#servicegroup2").buttonsetv(120);
    $("#tcopt2").buttonsetv(120);
    
    $("#tc_all").button().click(function () {
        var text = $(this).is(':checked') ? "Yes" : "No"
        $(this).button('option', 'label', text);
        if ($(this).is(':checked')) {
            $('.tc_button').prop('checked', true);
        } else {
            $('.tc_button').prop('checked', false);
        }
        $("[id^=tcopt]").buttonsetv("refresh");
    });
    $("#rush_all").button().click(function () {
        var text = $(this).is(':checked') ? "Yes" : "No"
        $(this).button('option', 'label', text);
        if ($(this).is(':checked')) {
            $('.service_opts input:radio[value="Rush"]').prop('checked', true);
        } else {
            $('.service_opts input:radio[value="Normal"]').prop('checked', true);
        }
        $("[id^=servicegroup]").buttonsetv("refresh");
    });
});