select or unselect checkboxes with selection rectangle

Hi i need to select checkboxes with a rectangle. i draw a rectangle but i dont know to select an checkbox if the rectangle "over" my item...

html

    <div id="div" hidden></div>
<br/>
Group 2 - Hold Shift and mouse over to check, Hold Ctrl and mouse over to uncheck<br/>
<input name=cbox1 onmouseover="if(event.shiftKey){this.checked = true;} else if(event.ctrlKey){this.checked = false;};" type="checkbox"><br/>
<input name=cbox2 onmouseover="if(event.shiftKey){this.checked = true;} else if(event.ctrlKey){this.checked = false;};" type="checkbox"><br/>
<input name=cbox3 onmouseover="if(event.shiftKey){this.checked = true;} else if(event.ctrlKey){this.checked = false;};" type="checkbox"><br/>
<input name=cbox4 onmouseover="if(event.shiftKey){this.checked = true;} else if(event.ctrlKey){this.checked = false;};" type="checkbox"><br/>
<input name=cbox5 onmouseover="if(event.shiftKey){this.checked = true;} else if(event.ctrlKey){this.checked = false;};" type="checkbox"><br/>

js for rectangle

var div = document.getElementById('div'), x1 = 0, y1 = 0, x2 = 0, y2 = 0;
function reCalc() {
    var x3 = Math.min(x1,x2);
    var x4 = Math.max(x1,x2);
    var y3 = Math.min(y1,y2);
    var y4 = Math.max(y1,y2);
    div.style.left = x3 + 'px';
    div.style.top = y3 + 'px';
    div.style.width = x4 - x3 + 'px';
    div.style.height = y4 - y3 + 'px';
}
onmousedown = function(e) {
    div.hidden = 0;
    x1 = e.clientX;
    y1 = e.clientY;
    reCalc();
};
onmousemove = function(e) {
    x2 = e.clientX;
    y2 = e.clientY;
    reCalc();
};
onmouseup = function(e) {
    div.hidden = 1;
};

css:

#div {
    border: 1px dotted #000;
    position: absolute;
}

i hope this link work...: http://ift.tt/2pFTgfD