Hi there,
I have trouble to select/deselect a simple checkbox (<input
type="checkbox" />) in the context of XHTML and jQuery 1.3.2 . Tested
on Firefox 3.5.2 and Safari 4.0.2.
I wonder whether someone can explain me how to do it the proper way?
To illustrate my problem, I have attached a small--ready to
go--example. To try it out, unpack, then open demo/checked.html and
demo/checked.xhtml in your browser. Then click on the 'select all'
checkbox to select or deselect all checkboxes in the table.
Everything works fine if the XHTML document is served as 'text/html'
(see demo/checked.html) or whether I'm using plain Javascript. It
does not work when served as 'application/xhtml+xml' (see demo/xhmtl).
In this case, the manually enabled checkbox (the one in the last row)
does not change. Everything works fine again if plain Javascript is
being used!
This is essentially how I use jQuery for selecting/deselecting a checkbox:
=== see demo/js/myjs.js ===
$("#mailtable input").each(
function() {
if (is_checked) {
$(this).attr('checked',"whatever");
}
else {
$(this).removeAttr('checked');
}
}
)
======================
This code mimics the (standard?) XHTML behaviour. If attribute
'checked' is present, the checkbox is 'checked'; otherwise
'unchecked'. I tried to 'uncheck' the checkbox by using
$(this).attr('checked',false) without luck. I tried also 'null' and
'undefined'. Then nothing happens at all. The closest to intented
behaviour is the snippet above which works except that a manually
selected checkbox does not change.
The plain simple Javacode
=== see demo/js/myjs.js ===
var mt, elms, e, i;
mt = document.getElementById("mailtable");
elms = mt.getElementsByTagName('input');
for(i=0; e=elms.item(i); i++)
{
e.checked = is_checked;
}
=====================
works fine without errors, no matter whether text/html or
application/xhtml+xml.
Greetz,
Wolfgang.
--
Wolfgang Häfelinger
häfelinger IT - Applied Software Architecture
http://www.haefelinger.it