Auto-select radio/checkbox while mouse enters

Auto-select radio/checkbox while mouse enters

HTML

<h1>Hold CTRL for auto-selection</h1>

<p><input type="checkbox" /></p>
<p><input type="checkbox" /></p>
<p><input type="checkbox" /></p>
<p><input type="checkbox" /></p>
<p><input type="checkbox" /></p>
<p><input type="checkbox" /></p>
<br />
<p><input type="radio" name="r1" /> <input type="radio" name="r1" /> <input type="radio" name="r1" /></p>
<p><input type="radio" name="r2" /> <input type="radio" name="r2" /> <input type="radio" name="r2" /></p>
<p><input type="radio" name="r3" /> <input type="radio" name="r3" /> <input type="radio" name="r3" /></p>
<p><input type="radio" name="r4" /> <input type="radio" name="r4" /> <input type="radio" name="r4" /></p>

CSS

h1 {
    margin-bottom: 10px;
    font-size: 1.1em;
}

JavaScript

Elements.implement({
    hoverSelect: function(modifier){
        this.addEvents({
            mouseenter: function(e){
                if (e && e[$pick(modifier, 'onmousedown')]){
                    this.checked = !this.checked;
                }
            }
        });
    }
});

// modifier can be control/shift/alt
$$('input').hoverSelect();