/Ugly/ + 'JavaScript'

A place for ugly, silly, or just-plain-crap JavaScript.

How NOT to implement styled checkboxes/radio buttons

While rescuing a project started by a straight-from-university intern, I came across his very enterprisy approach on creating nice and fancy styled checkboxes and/or radio buttons…

<div id="checkbox_unchecked_s" style="background: url('/./images/stories/checkbox/unchecked.png');display:none;width:31px;height:31px;" onclick="this.style.display = 'none';
    	document.getElementById('checkbox_checked_s').style.display = 'inline-block';
        document.getElementById('checkbox_unchecked_m').style.display = 'inline-block';
        document.getElementById('checkbox_checked_m').style.display = 'none';
        document.getElementById('checkbox_unchecked_l').style.display = 'inline-block';
        document.getElementById('checkbox_checked_l').style.display = 'none';
        document.getElementById('form_groesse').value = 's';"  ></div>
<div id="checkbox_checked_s" style="background: url('/./images/stories/checkbox/checked.png');display:inline-block;width:31px;height:31px;"  ></div>

Needless to say, this appeared multiple times on the same page… copy&pasted…

Posted by David Wosnitza (_druu) on 27 Sep 2011 | linky

Subscribe or follow @UglyJS!
.........
Fork then send a pull request to contribute.