This is related to my past DOM traversal question from a day ago.
Long story short, I have a series of checkbox inputs within table
cells. Upon a click event, the input, its containing cell, and the
containing cell's next sibling should change CSS classes.
According to Firebug, the class names are being changed correctly
(running Firefox 2). Yet, nothing is happening. In IE7, only the
input's class seems to be changing correctly.
What's even more strange is that I get the same result using a non-
jQuery method. So, I'm thinking my approach is correct, given what
Firebug is showing me, but I'm still not getting results.
So, the general HTML setup is:
<td><input class="inactive" type="checkbox" name="grid[]" value="1" /
></td><td>some text</td>.....
jQuery version of the script:
$(document).ready(function()
{
$(document.forms["Grid"].elements["grid[]"]).each(function()
{
$(this).click(function()
{
if($(this).hasClass("active"))
{
$(this).removeClass("active").addClass("inactive");
$
(this).parent().next().andSelf().toggleClass("active");
}
else
{
$(this).removeClass("inactive").addClass("active");
$
(this).parent().next().andSelf().toggleClass("active");
}
});
});
});
Traditional version:
window.onload = function()
{
var grids = document.forms["Grid"].elements["grid[]"];
for(var i = 0; i < grids.length; i++)
{
grids[i].onclick = function()
{
if(this.className == "active")
{
this.className = "inactive";
this.parentNode.className = "inactive";
this.parentNode.nextSibling.className = "inactive";
}
else
{
this.className = "active";
this.parentNode.className = "active";
this.parentNode.nextSibling.className = "active";
}
}
}
}
Basicaly, I'm just wondering if I'm doing something completely
offbase, or if this behavior is supposed to be expected, or if it's a
bug. I've asked around at other venues, and haven't received an
answer, so I'm still scratching my head. It's infuriating because it
LOOKS right, but nothing is happening.
I hope that posting such a large message is okay. If not, I apologize.
