Radio as toggle buttons

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

HTML

<h1>Personal information</h1>

<h2>gear</h2>
<div class="toggle-btn-grp">
    <label onclick="1" id="helmet" value="1" class="toggle-btn"><input type="radio" name="group2"/>helmet</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>hat</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>nothing</label>
</div>
    
<h2>ability</h2>
<div class="toggle-btn-grp">
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>beginner</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>intermediate</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>advanced</label>
</div>

<h2>snow conditions</h2>
<div class="toggle-btn-grp joint-toggle">
    <label onclick="" class="toggle-btn"><input type="radio" name="group3"/>hard packed</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>powder</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>ice</label>
</div>

<h2>weather</h2>
<div class="toggle-btn-grp cssonly">
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">clear</label></div>
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">partly cloudy</label></div>
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">snowy</label></div>
</div>

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

<input type="button" id="button" value="Find your precentage!" />
<input type="button" id="button2" value="Learn more" />

CSS

body {
  background-color:#079;
  text-align:left;
  padding:85px 0;
}

body { 
    padding: 10px; 
    font-family: sans-serif; 
}
h1, h2 { 
    font-weight: bold; 
    font-size: 16px; 
    margin: 30px 0 5px 0;
    padding: 0;
    line-height: 1em;
}
h1 { 
    font-size:20px; 
    margin-top:0; 
}


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

.toggle-btn-grp.joint-toggle .toggle-btn { 
    margin:5px 0; 
    padding:0.4em 2em; 
    border-radius:0;
    border-right-color:white;
}
.toggle-btn-grp.joint-toggle .toggle-btn:first-child { 
    margin-left:2px; 
    border-radius: 10px 0px 0px 10px; 
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child { 
    margin-right:2px;  
    border-radius: 0px 10px 10px 0px;
    border-right:solid 1px #CCC;
}


.toggle-btn:hover { 
    border:solid 1px #a0d5dc !important; 
    background:#f1fdfe;
}


.toggle-btn.success { 
    background:lightgreen;
    border:solid 1px green !important; 
}


.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
}


/* CSS only version */
.toggle-btn-grp.cssonly * {
    width:140px;
    height:30px;
    line-height:30px;
}
.toggle-btn-grp.cssonly div {
    display:inline-block;
    position:relative;
    margin:5px 2px;
}

.toggle-btn-grp.cssonly div label {
    position:absolute;
    z-index:0;
    padding:0;
    text-align:center;
}

.toggle-btn-grp.cssonly div input {
    position:absolute;
    z-index:1;
   ...

JavaScript

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


var onClick = function() {
    alert("87%");
};

$('#button').click(onClick);

$('#button2').click(function() {
    alert('I have literally no idea what you selected but you should probably stay off of they hill');
});