radio checklist

snippet shows radio buttons that can be clicked on label or icon as well as the radio button control

by David McClelland

HTML

<div id="CheckList">
    <div class="SelectItem green">
        <label class="ShowTypesLabel">
            <input id="totalCountMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="all" onchange="switchRadio(this)" checked/>
            <img id="All" src="assets/images/assettracker-online.png?v=%%VERSION_TOKEN%%" width="27" height="23">Online Assets</label>
    </div>
    <div class="SelectItem red">
        <label class="ShowTypesLabel">
            <input id="missingAssetsMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="missing" onchange="switchRadio(this)" />
            <img id="Missing" src="assets/images/assettracker-missing.png?v=%%VERSION_TOKEN%%" width="28" height="23">Missing Assets</label>
    </div>
    <div class="SelectItem blue">
        <label class="ShowTypesLabel">
            <input id="mutedAssetsMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="muted" onchange="switchRadio(this)" />
            <img id="Muted" src="assets/images/assettracker-muted.png?v=%%VERSION_TOKEN%%" width="30" height="23">Muted Assets</label>
    </div>
    <div class="SelectItem yellow">
        <label class="ShowTypesLabel">
            <input id="neverRegisteredAssetsMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="neverRegistered" onchange="switchRadio(this)" />
            <img id="Unregistered" src="assets/images/assettracker-unregistered.png?v=%%VERSION_TOKEN%%" width="26" height="23">Unregistered</label>
    </div>
</div>