[jQuery] strange .toggle() behavior
Hi jQuery community,
I hit an interesting situation with jQuery today where the toggle()
method exhibited some strange behavior.
Show / hide methods inside the toggle() worked fine, but the setting
and removing the "clicked" attribute on the checkbox to which the
toggle was bound did not. I tested this by re-writing the behavior as
a .click() with some conditional logic, with the if / then branches
executing the same statements as those inside the two toggle()
functions.
Result: .click() with if / then worked, while .toggle() failed
I was wondering if I'm missing something obvious...
Here are the two separate jQuery snippets that I tried, one
with .toggle(), one with .click(), they are followed by the relevant
chunck of XHTML.
It looks a little bit like some sort of bug to me, but I'm just not
familiar enough with jQuery to know.
Thanks very much!
/* $(this) checkbox does not toggle when clicked */
$(document).ready(function () {
$("form > fieldset > ul > li:last").hide();
$("#id_close_bidding").toggle(
function () {
$(this).attr("checked", true);
$("form > fieldset > ul > li:last").show();
},
function () {
$(this).attr("checked", false);
$("#id_notify_others").attr("checked", false);
$("form > fieldset > ul > li:last").hide();
}
);
});
/* $(this) checkbox toggles when clicked */
$(document).ready(function () {
$("form > fieldset > ul > li:last").hide();
$("#id_close_bidding").click(
function () {
if ($("form > fieldset > ul > li:hidden").length > 0) {
$(this).attr("checked", true);
$("form > fieldset > ul > li:last").show();
}
else {
$(this).attr("checked", false);
$("#id_notify_others").attr("checked", false);
$("form > fieldset > ul > li:last").hide();
}
}
);
});
--XHTML Snippet--
<form method="post" action=".">
<fieldset>
<ul>
<li><input type="checkbox" id="id_close_bidding" /></li>
<li><input type="checkbox"
id="id_notify_others" /></li>
</ul>
<input value="Accept Bid" type="submit" />
</fieldset>
</form>