7

I have a table filled with checkboxes like so:

enter image description here

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 start with this :/ I searched for an answer, but only found another thread of someone asking how to do it, but with no answers.

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/

Also, I'd prefer to keep the <input type="checkbox"> model because reworking my system would be time consuming, but I'm open to other options if this isn't possible. Any help will be greatly appreciated!

CSS Apprentice
  • 899
  • 1
  • 16
  • 29
  • 3
    Afraid I don't have time to type out some code, but you can write a JS function to change the `checked`/`unchecked` value of the box on a mouseover. See [this W3schools page](http://www.w3schools.com/jsref/event_onmouseover.asp). – kirkpatt Apr 20 '16 at 21:15
  • 1
    There's an NPM package that does exactly this: [drag-check-js](https://www.npmjs.com/package/drag-check-js) (disclaimer: I'm the author). [Demo link](https://www.seph.dk/dragcheck/examples/jquery/index.html). – Seph Soliman Oct 08 '17 at 09:27

1 Answers1

9

<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>

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

<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>
StardustGogeta
  • 3,331
  • 2
  • 18
  • 32
  • *edited* - Your help is already more than appreciated, but I'm curious; instead of using an ID/`onmouseover` ID, could I add a data-attribute that turns on and off? – CSS Apprentice Apr 21 '16 at 17:56
  • @CSS I am sorry, but I don't quite understand. Do you want me to try it without unique IDs for each button? – StardustGogeta Apr 21 '16 at 18:15
  • No, you don't have to spend your time on that, I'm already satisfied with your answer :) This is more for learning at this point. As an alternative solution, could I use a data-attribute for this? Like `data-checked="true"`? – CSS Apprentice Apr 21 '16 at 18:21
  • 1
    @CSS I fixed the submission with a better alternative that removes IDs, if that is what you were looking for. If you are having trouble with the preview, try fullscreen or taking the code and putting it in an external HTML document. – StardustGogeta Apr 21 '16 at 18:49