"check" Multiple Checkboxes With Click & Drag?

I have a table filled with checkboxes like so: I'd like to be able to keep my mouse held down and drag to activate multiple checkboxes. I don't have the slightest clue where to st

Solution 1:

<table><tbody><tr><td><inputid=1onmouseover='check(1)'type="checkbox"></td><td><inputid=2onmouseover='check(2)'type="checkbox"></td><td><inputid=3onmouseover='check(3)'type="checkbox"></td></tr><tr><td><inputid=4onmouseover='check(4)'type="checkbox"></td><td><inputid=5onmouseover='check(5)'type="checkbox"></td><td><inputid=6onmouseover='check(6)'type="checkbox"></td></tr><tr><td><inputid=7onmouseover='check(7)'type="checkbox"></td><td><inputid=8onmouseover='check(8)'type="checkbox"></td><td><inputid=9onmouseover='check(9)'type="checkbox"></td></tr></tbody></table><script>functioncheck(id)
  {
    if(mouseDown)
      {
        document.getElementById(id).checked = 1-document.getElementById(id).checked;
        // document.getElementById(id).checked = true;// ^ If you only want to turn them on, use this.
      }
  }
  
  var mouseDown = 0;
  document.body.onmousedown = function()
  { 
    ++mouseDown;
  }
  
  document.body.onmouseup = function()
  {
  --mouseDown;
  }
  // Credit to http://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down</script>

Or, alternatively, use the code beneath to avoid IDs:

<table><tbody><tr><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td></tr><tr><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td></tr><tr><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td><td><inputonmouseover='check(this)'type="checkbox"></td></tr></tbody></table><script>functioncheck(box)
  {
    if(mouseDown)
      {
        box.checked = 1-box.checked;
		// box.checked = 1;// ^ If you only want to turn them on, use this.
      }
  }
  
  var mouseDown = 0;
  document.body.onmousedown = function()
  {++mouseDown;}
  document.body.onmouseup = function()
  {--mouseDown;}
  // Credit to http://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down</script>