issue when unchecking radio buttons with jQuery
Here is a group of开发者_如何学Go radio buttons:
<input id="Radio1" type="radio" name="g" />rbtn 1
<input id="Radio2" type="radio" name="g" />rbtn 2
<input id="Radio3" type="radio" name="g" />rbtn 3
<div id="test">Click this div to uncheck selected radio button</div>
And my jQuery code looks like this:
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () {
//alert("clicked");
$(":checked").removeAttr("checked");
//$(":checked").attr("checked", false);
});
});
</script>
For some reason, I can't see any radio button has been unchecked when I click the div. I have also tried to use attr() method to set checked equals false, but still no luck. Could anyone give me a little hint here?
EDIT:
I don't know if it's because using ASP page causes the problem. I doubt so though. Just can't think of anything else that stops it working. So weird.
EDIT2:
I think I have found the actual cause. The problem seems to be the DOCTYPE. I wouldn't have thought of that in the first place, really. T_T
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The above was I originally had with my HTML, and when I took it out, jQuery seemed to be working all right :)
Any explanation on that?
EDIT3:
I think by removing DOCTYPE we will be using IE's quirks mode. So for non-IE browsers, it actually won't help.
FINAL EDIT:
Finally I can stop scratching my head by upgrading jQuery code to the latest version. Indeed, jQuery 1.6.2 is a lot better than jQuery 1.6. :D
Here is the working code:
http://jsfiddle.net/RSU46/
$(function() {
$('#test').live('click', function () {
$('input[name=g]:radio').removeAttr('checked');
});
});
$("#test").click(function () {
alert("clicked");
$("input:checked").removeAttr("checked");
});
here is the fiddle http://jsfiddle.net/2QgxN/
try this.
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () {
//alert("clicked");
//$(":checked").removeAttr("checked");
$("input:radio").removeAttr("checked");
//$(":checked").attr("checked", false);
});
});
</script>
you need to specify the type of selector here $(":checked").attr("checked", false); or $(":checked").removeAttr("checked");in your code does not specify which checked item
well, your code works for me. I tested in FF and IE 7, 8, 9. But you can try this line as well for unckecking the radio.
$("input[name=g]:checked").attr("checked",false);
Else I think you should check if you've js enabled while checking the far unlikly case though.
Any piece of code given here should be fine, as long as the JQuery code is up-to-date. A lesson for me to remember to upgrade JQuery. :)
All the above procedures work for me. And yes, upgrading jquery is a great help. As for .live(), it works in jquery version 1.6.2 very well, but as of jquery 1.7.7, the code is deprecated. jQuery suggests using .on() instead of .live().
You can refer to this link http://api.jquery.com/live/ for further detail.
加载中,请稍侯......
精彩评论