Radio as toggle buttons

Radio buttons re-styled as toggle buttons to preserve semantically correct code and enable progressive enhancement.

by Steven Hylands

HTML

<div class="toggle-btn-grp joint-toggle">
    <label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Taco</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Kebab</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Burrito</label>
</div>

<!-- Note: empty onclick attribue is there to fix iOS labels not being clickable to their input target -->

CSS

.toggle-btn-grp { 
    margin:3px 0; 
}
.toggle-btn { 
    text-align:center; 
    margin:5px 2px;
    padding:0.4em 3em; 
    color:#000; 
    background-color:#FFF; 
    border-radius:10px; 
    display:inline-block; 
    border:solid 1px #CCC; 
    cursor:pointer;
}

JavaScript

$(".toggle-btn:not('.noscript') input[type=radio]")
	.addClass("visuallyhidden")
	.change(function() {
    if( $(this).attr("name") ) {
      $(this).parent().addClass("success").siblings().removeClass("success")
    } else {
      $(this).parent().toggleClass("success");
    }
	});