Ask the CSS Guy

Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

Brett writes:

I am trying to implement your row over selection technique but have found that clicking the actually checkbox does not work. It would be great if this could work. Clicking the row works and checks the box but if it is checked and you click the checkbox, it doesn’t work. Did you ever fix this?

Brett, prompted by your letter, yes, now I have.

Brett is referring to this post, and specifically, this particular example.

I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it's time to uncheck the checkbox. In a fraction of a second, it would look like the checkbox never checked, but the row changed color anyway, sending the wrong signals to the end user.

What I needed was a way to listen if the checkbox was checked, and if so, don't run the extra function that ended up unchecking the box.

There are two JavaScript property/methods that helped prevent that other function from running - cancelBubble for IE, and stopPropagation() for everything else. I don't want to bore my audience, so keep in mind this explanation is more for my noob scripting reference.

I'm told to use cancelBubble like so:

window.event.cancelBubble = true;

and I'm told to use stopPropagation like this:

event.stopPropagation()

but I need to implement it like this:

someElementHere.onclick = function(BLAH) {
  if (window.event && !window.event.cancelBubble) {
    window.event.cancelBubble = "true";
  } else {
    BLAH.stopPropagation();
  }
}

Here's that idea implemented in a function, actually working:

function lockRowUsingCheckbox() {
  var tables = document.getElementsByTagName("table");
  for (var m=0; m<tables.length; m++) {
    if (tables[m].className == "pickme") {
      var tbodies = tables[m].getElementsByTagName("tbody");
      for (var j=0; j<tbodies.length; j++) {
        var checkboxes = tbodies[j].getElementsByTagName("input");
        for (var i=0; i<checkboxes.length; i++) {
          checkboxes[i].onclick = function(evt) {
            if (this.parentNode.parentNode.className.indexOf("selected") != -1){
              this.parentNode.parentNode.className = this.parentNode.parentNode.oldClassName;
            } else {
              addClass(this.parentNode.parentNode,"selected");
            }
            if (window.event && !window.event.cancelBubble) {
              window.event.cancelBubble = "true";
            } else {
              evt.stopPropagation();
            }
          }
        }
      }
    }
  }
}

Once again, a link to that example in action.

# May 14, 2007 7:07 PM