Jquery 操作checked Box 一些问题。
一、Jquery 1.9.X 获得复选框(checkbox)存在的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#button").click(function () { var checked = $("#checkBox").attr("checked"); alert(checked); }); }); </script> </head> <body> <input type="checkbox" checked="checked" id="checkBox"/> <button type="button" id="button">查看</button> </body> </html>
运行上述代码你会发现,不论你是否选中,点击查看按钮都显示 checked。
二、Jquery 1.9.X 设置 复选框(checkbox)存在的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#selected").click(function () { $("#checkBox").attr("checked", "checked"); }); $("#unselect").click(function () { $("#checkBox").removeAttr("checked"); }); }); </script> </head> <body> <input type="checkbox" id="checkBox"/> <button type="button" id="selected">选中</button> <button type="button" id="unselect">取消</button> </body> </html>
运行上述代码,只要取消之后再也无法选中
三、解决办法
1、使用1.8.X 以下版本
2、使用$("filter")[0].checked = true 或 $("filter")[0].checked = false 来操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#selected").click(function () { $("#checkBox")[0].checked = true; }); $("#unselect").click(function () { $("#checkBox")[0].checked = false; }); }); </script> </head> <body> <input type="checkbox" id="checkBox"/> <button type="button" id="selected">选中</button> <button type="button" id="unselect">取消</button> </body> </html>
总结:Jquery 1.9.x 对复选框(checkbox)支持不好,不知道是Bug还是原意?希望Jquery官方给出解释?