The problem with your fix is that the event target for the mouseup is not the same as the mousedown. You can resolve that by saving the clicked checkbox in a var, and because of event order the change has to be made on 'click' rather than mouseup.
http://jsbin.com/asizu/edit Sorry for the bugs, this was written rather quickly, I hope it works now :) On Apr 11, 11:30 am, Lwangaman <donjohn.f...@gmail.com> wrote: > Ok I tried to touch up the code a little to fix that, here's my > example: > > http://jsbin.com/iyubi/edit > > Now, with a single click, the value on mouseup is reversed to keep it > as it was with mousedown. But, when you do a drag, the mouseup of the > last checkbox is not canceled or reversed... I suppose it would be > enough to cancel $(this)'s mouseup, but how would you refer to $(this) > from within the $boxes.bind('mouseover')? > > On 11 Apr, 16:07, Lwangaman <donjohn.f...@gmail.com> wrote: > > > > > > > Hmm, just noticed one problem though... A single click on a checkbox > > is supposed to work too, but with this code as soon as you mouseup the > > value goes back the other way... You have to drag off in order to keep > > the value in there... > > > On 11 Apr, 06:21, Ricardo <ricardob...@gmail.com> wrote: > > > > I think you already got the .dc namespacing thing, so: the mousedown > > > is not being bound to the checkbox, but to the container element (the > > > table, or in my example below, the UL). When you click a checkbox the > > > mousedown event will bubble up to the container and fire this handler. > > > > As I expected my code had some flaws a few typing errors, see it fixed/ > > > working here: > > > >http://jsbin.com/edabo/edit > > > > I added the ability to specify a selector for the checkboxes, that way > > > you can skip the ones you don't want. In case it's not provided all > > > checkboxes are used by default. > > > > cheers, > > > - ricardo > > > > On Apr 10, 8:17 pm, Lwangaman <donjohn.f...@gmail.com> wrote: > > > > > Ok first of all thanks for taking interest! > > > > Then, I've tried going through your code and applying it, and I have a > > > > few questions: > > > > -- Besides the mouseover.dc that I didn't get either... > > > > -- I'm supposing that $boxes would be a variable where all the > > > > checkboxes that are applicable have been stored previously? Yet, if > > > > you build it as a "plugin" you have no way of defining which > > > > checkboxes are to comprised (unless this functionality is built into > > > > the plugin using data passed through parameters, I suppose). > > > > -- Then I don't quite understand what the "mousedown" is being bound > > > > to. In my example (which was not built as a plugin, but I suppose a > > > > plugin or defined function would be even better because it's much more > > > > flexible and anyone can download it and use it), the "mousedown" was > > > > being bound to all the cells that had checkboxes in them, and I was > > > > determining that through the class I had given them > > > > "mychkbox" (because I didn't want some of the checkboxes included, > > > > since they do not have an active state; the table has names, > > > > addresses, emails, and those that don't have an email have an inactive > > > > checkbox). I was also trying to follow cross-browser.com's way of > > > > listening to the mousedown on the cell containing the checkbox rather > > > > than on the checkbox itself, making the whole click-drag thing a lot > > > > more user-friendly. > > > > > On 10 Apr, 20:36, jay <jay.ab...@gmail.com> wrote: > > > > > > Just curious.. What is the difference between mouseover.dc and > > > > > mouseover? > > > > > > On Apr 10, 1:44 pm, Ricardo <ricardob...@gmail.com> wrote: > > > > > > > This (untested) is how I envision the code for that: > > > > > > > $.fn.dragCheck = function(){ > > > > > > //this == the current jQuery element > > > > > > return this.each(function(){ > > > > > > > //this == current element in the loop (table etc) > > > > > > $(this).bind('mousedown', function(e){ > > > > > > > //don't do anything if you didn't click a checkbox > > > > > > if ( !$(e.target).is(':checkbox') ) > > > > > > return true; > > > > > > > //get the clicked checkbox state > > > > > > isChecked = e.target.checked; > > > > > > //apply it to all other checkboxes on mouseover > > > > > > $boxes.bind('mouseover.dc', function(){ > > > > > > this.checked = isChecked; > > > > > > }); > > > > > > > }).bind('mouseup', function(e){ > > > > > > //cancel the mouseover action > > > > > > $boxes.unbind('mouseover.dc'); > > > > > > }); > > > > > > > }; > > > > > > > $('#table1').dragCheck(); > > > > > > > cheers, > > > > > > - ricardo > > > > > > > On 9 abr, 17:15, Lwangaman <donjohn.f...@gmail.com> wrote: > > > > > > > > Ok I resolved the "cannot assign to a function result" problem by > > > > > > > putting the value assignment into a "function(){}": > > > > > > > > 48 $("td.mychkbox").each( > > > > > > > 49 function(){ > > > > > > > 50 $(this).bind( > > > > > > > 51 "mouseover", > > > > > > > 52 function(){ > > > > > > > 53 if (gCheckedValue != null){ > > > > > > > 54 var eccomi = this; > > > > > > > 55 var eccoti = $(eccomi).find("input:checkbox"); > > > > > > > 56* function(){$(eccoti).attr("checked") = > > > > > > > gCheckedValue;} > > > > > > > 57 } > > > > > > > 58 }); > > > > > > > 59 }); > > > > > > > > Now I don't get any errors, but the event assignments don't seem > > > > > > > to be > > > > > > > working together correctly... > > > > > > > Basically what's supposed to happen is this: > > > > > > > 1 - "onclick" event of the checkboxes is canceled since the > > > > > > > clicking > > > > > > > and dragging is being assigned to the table cells that contain > > > > > > > them > > > > > > > 2 - the table cells themselves don't actually have on "onclick" > > > > > > > event, > > > > > > > because the value is given to the checkboxes with the > > > > > > > "onmousedown" > > > > > > > and especially the "onmouseover" event. > > > > > > > 3 - "onmousedown" gives the variable "gCheckedValue" a value, > > > > > > > either > > > > > > > of "true" or of "false" (depending on the actual state of the > > > > > > > checkbox, so if it is unchecked it will get checked and > > > > > > > vice-versa), > > > > > > > and "onmouseup" empties "gCheckedValue" of any value. So as long > > > > > > > as > > > > > > > the mouse is down, "gCheckedValue" has a value to give to any of > > > > > > > the > > > > > > > checkboxes with the "onmouseover" event, but as soon as the mouse > > > > > > > button is released it no longer has a value so the "onmouseover" > > > > > > > event > > > > > > > will no longer effect any of the checkboxes until the mousebutton > > > > > > > is > > > > > > > pressed again. > > > > > > > > So the value of "gCheckedValue" is set in the "mousedown" event, > > > > > > > and > > > > > > > is transmitted in the "mouseover" event. > > > > > > > > And yet the code doesn't seem to be working correctly. The current > > > > > > > value of the cell is detected correctly (I've gotten it through an > > > > > > > alert), it's contrary is correctly set in "gCheckedValue" (I've > > > > > > > gotten > > > > > > > that through an alert too), but the new value is not being set in > > > > > > > the > > > > > > > checkbox... In fact click sets no value, click and hold sets no > > > > > > > value, > > > > > > > click and drag (mouseover the other checkboxes / cells) set no > > > > > > > value... > > > > > > > > On 9 Apr, 14:23, Lwangaman <donjohn.f...@gmail.com> wrote: > > > > > > > > > I thought I'd undertake the endeavour of translating into > > > > > > > > jquery the > > > > > > > > neat little "click-n-drag checkboxes" functionality of cross- > > > > > > > > browser.com's X-library. This functionality allows for multiple > > > > > > > > checkbox selection or de-selection by simply clicking on one of > > > > > > > > them > > > > > > > > and then dragging the mouse over the others. > > > > > > > > > I began mentioning this in another post, but I figured that > > > > > > > > perhaps a > > > > > > > > new post with the right title would be better. Rather than > > > > > > > > re-post all > > > > > > > > the code though, here's a reference to the message where the > > > > > > > > full code > > > > > > > > of both the X-library functions and my attempted translation of > > > > > > > > them > > > > > > > > is posted: > > > > > > > > >http://groups.google.com/group/jquery-en/msg/0f38d747d97cf701 > > > > > > > > > I doesn't quite seem to work though, none of my checkboxes are > > > > > > > > getting > > > > > > > > selected either on click or on drag. Any javascript - jquery > > > > > > > > experts > > > > > > > > have any ideas on what needs to be perfected? > > > > > > > > > When I run it in Internet Explorer, the debugger gives me this > > > > > > > > message: > > > > > > > > "Cannnot assign to a function result" > > > > > > > > > and it refers to line 56, which should be the one that sets the > > > > > > > > selection: > > > > > > > > > 48 $("td.mychkbox").each( > > > > > > > > 49 function(){ > > > > > > > > 50 $(this).bind( > > > > > > > > 51 "mouseover", > > > > > > > > 52 function(){ > > > > > > > > 53 if (gCheckedValue != null){ > > > > > > > > 54 var eccomi = this; > > > > > > > > 55 var eccoti = $(eccomi).find("input:checkbox"); > > > > > > > > 56* $(eccoti).attr("checked") = gCheckedValue; > > > > > > > > 57 } > > > > > > > > 58 }); > > > > > > > > 59 });- Hide quoted text - > > > > > > > - Show quoted text -
