＆＃34;检查＆＃34;带有Click＆amp; amp;的多个复选框拖动？

Question

我的桌子上装满了像这样的复选框：

我希望能够按住鼠标并拖动以激活多个复选框。我没有丝毫的线索从哪里开始：/我搜索了一个答案，但只找到another thread某人询问如何做，但没有答案。

HTML：

<table>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
      <td><input type="checkbox"></td>
    </tr>
    <!-- Repeat tr 2x -->
  </tbody>
</table>

的jsfiddle： https://jsfiddle.net/CSS_Apprentice/ge1zx2yg/

另外，我更喜欢保留<input type="checkbox">模型，因为重新设计我的系统非常耗时，但如果不可能，我会对其他选项开放。任何帮助将不胜感激！

Answer 1

＆＃13;

＆＃13;

<table>
  <tbody>
    <tr>
      <td><input id=1 onmouseover='check(1)' type="checkbox"></td>
      <td><input id=2 onmouseover='check(2)' type="checkbox"></td>
      <td><input id=3 onmouseover='check(3)' type="checkbox"></td>
    </tr>
    <tr>
      <td><input id=4 onmouseover='check(4)' type="checkbox"></td>
      <td><input id=5 onmouseover='check(5)' type="checkbox"></td>
      <td><input id=6 onmouseover='check(6)' type="checkbox"></td>
    </tr>
    <tr>
      <td><input id=7 onmouseover='check(7)' type="checkbox"></td>
      <td><input id=8 onmouseover='check(8)' type="checkbox"></td>
      <td><input id=9 onmouseover='check(9)' type="checkbox"></td>
    </tr>
  </tbody>
</table>

<script>
  function check(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>

＆＃13;

＆＃13;

＆＃13;

或者，或者，使用下面的代码来避免ID：

＆＃13;

＆＃13;

<table>
  <tbody>
    <tr>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
    </tr>
    <tr>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
    </tr>
	<tr>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
      <td><input onmouseover='check(this)' type="checkbox"></td>
    </tr>
  </tbody>
</table>

<script>
  function check(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>

＆＃13;

＆＃13;

＆＃13;