JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<form accept-charset="utf-8" method="get" action="#">
      <fieldset class="checkboxes">
        <label for="checkbox-01" class="label_check">
                    <input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01" /> Checkbox1
                </label>
        <label for="checkbox-02" class="label_check">
                    <input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> Checkbox2</label>
      </fieldset>
      <fieldset class="radios">
        <label for="radio-01" class="label_radio">
                    <input type="radio" checked="" value="1" id="radio-01" name="sample-radio" />Radio1
                </label>
        <label for="radio-02" class="label_radio">
                    <input type="radio" value="1" id="radio-02" name="sample-radio" />Radio2
                </label>
        <label for="radio-03" class="label_radio">
                    <input type="radio" value="1" id="radio-03" name="sample-radio" /> Radio3
                </label>
      </fieldset>
    </form>

<script type="text/javascript">
        function setupLabel(){
            if($('.label_check input').length) {
                $('.label_check').each(function(){
                    $(this).removeClass('c_on');
                });
                $('.label_check input:checked').each(function(){
                    $(this).parent('label').addClass('c_on');
                });
            };
            if($('.label_radio input').length) {
                $('.label_radio').each(function(){
                    $(this).removeClass('r_on');
                });
                $('.label_radio input:checked').each(function(){
                    $(this).parent('label').addClass('r_on');
                });
            };
        }        
        
    </script>

CSS

* { margin: 0; padding: 0; }
        body { 
            font: 14px/18px 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; 
            color: #fff; 
            background: #333; 
        }
        a:hover, 
        a:active { 
            outline: none; 
        }
        /*form style*/
        form { 
            width: 300px; 
            padding: 18px 20px 0; 
            margin:20px auto;
            background-color: #0064cd;
            background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
            background-image: -moz-linear-gradient(#049cdb, #0064cd);
            background-image: -ms-linear-gradient(#049cdb, #0064cd);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
            background-image: -webkit-linear-gradient(#049cdb, #0064cd);
            background-image: -o-linear-gradient(#049cdb, #0064cd);
            background-image: linear-gradient(#049cdb, #0064cd);    
            -webkit-border-radius: 10px; 
            -moz-border-radius: 10px; 
            -khtml-border-radius: 10px; 
            border-radius: 10px;            
            -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            box-shadow: 0 5px 12px rgba(0,0,0,.4); 
        }
        fieldset { 
            border: 0; 
            padding-bottom: 9px;
        }
        label { 
            display: block; 
            cursor: pointer; 
            line-height: 20px; 
            padding-bottom: 9px; 
            text-shadow: 0 -1px 0 rgba(0,0,0,.2); 
        }
        .checkboxes {
            border-bottom: 1px solid #0064cd;
        }
        .radios { 
            padding-top: 18px;
            border-top: 1px solid #049CDB;
        }
        .label_check input,
        .label_radio input { 
           ...

JavaScript

$(function(){
            $('body').addClass('has-js');
            $('.label_check,.label_radio').click(function(){
                setupLabel();
            });
            setupLabel();
        });