I continued this thread in a new thread: http://groups.google.com/group/jquery-en/browse_thread/thread/956e72c4e071a3de
On 9 Apr, 04:31, Lwangaman <donjohn.f...@gmail.com> wrote: > Ok now that that has been straightened out, here's my full endeavour: > > I'm trying to translate into jquery a useful functionality that I > found in the X-library (http://cross-browser.com/), > and that is multiple checkbox selection by click and drag over them. > (seehttp://cross-browser.com/x/examples/clickndrag_checkboxes.php). > > His code is: > > /* Defines Click-n-Drag Checkboxes functions*/ > > var gCheckedValue = null; > > function initCheckBoxes(sTblId){ > xTableIterate(sTblId, > function(td, isRow) { > if (!isRow) { > if (td.className=='mychkbox'){ > var cb = td.getElementsByTagName('input'); > if (cb && cb[0].type.toLowerCase() == 'checkbox') { > td.checkBoxObj = cb[0]; > td.onmousedown = tdOnMouseDown; > td.onmouseover = tdOnMouseOver; > td.onclick = tdOnClick; > } > } > } > } > ); > > } > > function tdOnMouseDown(ev){ > if (!mymail.checkedall.checked){ > if (this.checkBoxObj) { > gCheckedValue = this.checkBoxObj.checked = ! > this.checkBoxObj.checked; > document.onmouseup = docOnMouseUp; > document.onselectstart = docOnSelectStart; // for IE > xPreventDefault(ev); // cancel text selection > } > } > > } > > function tdOnMouseOver(ev){ > if (gCheckedValue != null && this.checkBoxObj) { > this.checkBoxObj.checked = gCheckedValue; > } > > } > > function docOnMouseUp(){ > document.onmouseup = null; > document.onselectstart = null; > gCheckedValue = null; > > } > > function tdOnClick() > { > // Cancel a click on the checkbox itself. Let it bubble up to the TD > return false; > > } > > function docOnSelectStart(ev) > { > return false; // cancel text selection > > } > > /* End of Click-n-Drag Checkboxes functions*/ > > I tried to translate it into jquery like this: > > $("td.mychkbox").each( > function(){ > $(this).bind( > "mousedown", > function(){ > if (allchecked.attr("checked")==false){ > var eccomi = this; > var eccoti = $(eccomi).find("input:checkbox"); > var eccoci = $(eccoti).attr("checked"); > gCheckedValue = eccoci = !eccoci; > $(document).mouseup = function(){ > $(document).mouseup = null; > $(document).selectstart = null; > gCheckedValue = null;} > > $(document).selectstart = function(){return false;} // for > IE > } > }); > }); > > $("td.mychkbox").each( > function(){ > $(this).bind( > "mouseover", > function(){ > if (gCheckedValue != null){ > var eccomi = this; > var eccoti = $(eccomi).find("input:checkbox"); > $(eccoti).attr("checked") = gCheckedValue; > } > }); > }); > > $("td.mychkbox").each( > function(){ > $(this).bind( > "click", > function(){ > return false; > }); > }); > > Doesn't quite work right though. Clicking on the checkboxes has no > result, dragging over them has no result, it's as though all events > have been canceled. Anyone have any ideas? > > On 9 Apr, 03:55, Lwangaman <donjohn.f...@gmail.com> wrote: > > > Thanks a lot! That got me going again! > > (eccomi was supposed to be itsme, eccoti was supposed to be itsyou, I > > overlooked that transliteration that I was doing from italian!) > > > On 9 Apr, 03:48, Shawn <sgro...@open2space.com> wrote: > > > > Lwangaman wrote: > > > > alert(itsme.name); > > > > > // gives "undefined" > > > > because a tablecell usually doesn't have a "name" attribute associated > > > with it. Remember that your "itsme" variable is a reference to a DOM > > > element (not a jQuery element). Which explains > > > > > var itsyou = itsme.attr("name"); > > > > alert(itsyou); > > > > // gives no results, it actually stops everything from working. > > > > You would need itsyou = $(itsme).attr("name"); But even then, if > > > "itsme" is a tablecell, the name attribute likely doesn't exist. Maybe > > > try "id" instead? > > > > > var itsyou = eccomi.find("input:checkbox"); > > > > alert(eccoti); > > > > > // gives no results, it actually stops everything from working > > > > if eccomi is a DOM element, then this would stop and likely throw an > > > error ('find' not a property or object)... Try it as > > > > $(eccomi).find("input:checkbox"); > > > > The core issue that I can see is understanding the difference between a > > > DOM object/element and a jQuery object. They are not the same, though > > > they are often used in a very similar manner. > > > > HTH. > > > > Shawn
