JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<script type="text/javascript" src="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js"></script>


<div class="item">
                        <h4>Item</h4>
                        <ul>                
                            <li>Description</li>
                        </ul>
                         <div class="radio-container">
                            <div class="radio-stack">
                                <input type="radio" class="styled" id="item1">
                            </div>
                            <label for="item1">$100</label>
                        </div>
                    </div>

CSS

.radio {
  width: 19px;
  height: 25px;
  padding: 0 5px 0 0;
   background: url(http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/radio.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

JavaScript

var updating = false;
$(".item").click(function() {
    if ( !updating ) {
        var inputID = $(this).find("label").attr("for");
        updating = true;
        $('#' + inputID).click();
        updating = false;
    }
});