set checked checkboxes like in ms excel by mouse dragging

Question

Hi i make list by php nearly 500~ value in a table (Sil = Delete)

table

i already use jquery for my project

is there any plugin that allows you make checked multiple checkbox in jquery if they move the mouse on 2 parent div while mouse left button is on clicked

score 1 · Accepted Answer · answered Mar 28 '13 at 11:08

1

Yes you can, like this:

var mouseIsDown;

$(document).on('mousedown', function() {    
    mouseIsDown = true;
});

$(document).on('mouseup', function() {
    mouseIsDown = false;
});

$('td').on('mouseenter', function() {        
    if(mouseIsDown) {
        $(this).find('input[type=checkbox]').prop('checked', true);
    }
});

See the demo: http://jsfiddle.net/nuKEK/

answered Mar 28 '13 at 11:08

Piet van Dongen

1,629
10
13

Whoop, that was debug code, I removed it :) But yeah, it will appear if you have a browser JavaScript console opened, or Firebug. – Piet van Dongen Mar 28 '13 at 11:12
if its check tries to check again it must uncheck :) ? – İkiz Kulelere Dalan Teyyare Mar 28 '13 at 11:27
1

That is [easily fixable](http://jsfiddle.net/nuKEK/1/), but the failure to check/uncheck the starting checkbox isn't. – James Mar 28 '13 at 11:38
is it possible to to do without make a new variable like ch can't we do it by using this *just wondering* – İkiz Kulelere Dalan Teyyare Mar 28 '13 at 11:44

score 0 · Answer 2 · edited May 23 '17 at 11:57

yes it is fairly easy! And already closely answered on another topic here on SO.

To get an idea, hence the following simple code below.

PS: This is taken from mouseover while mousedown

You only have to replace the .node wit ha class your checkboxes have in common, and instead of setting css you have to toggle (or check) your selector (i.e: your checkbox)

Enjoy... :)

$(document).ready(function(){

  var isDown = false;   // Tracks status of mouse button

  $(document).mousedown(function() {
    isDown = true;      // When mouse goes down, set isDown to true
  })
  .mouseup(function() {
    isDown = false;    // When mouse goes up, set isDown to false
  });

  $(".node").mouseover(function(){
    if(isDown) {        // Only change css if mouse is down
       $(this).css({background:"#333333"});
    }
  });
});

Edit:

To check/uncheck a checkbox you may use

$('.myCheckbox').prop('checked', true);

set checked checkboxes like in ms excel by mouse dragging

2 Answers2