关于checkbox你不得不注意的事情
今天搞checkbox赋值的问题,搞得心里憔悴。
看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#CheckboxALL").click(function() { var checklist = $("#myCheckList").find(":checkbox"); checklist.click(); }); }); jQuery.extend({ SelectedID: function(thechkinput) { var theID = $(thechkinput).attr("id"); var thechecked = $(thechkinput).attr("checked"); var theidlist = $("#Text1").val(); if (!theidlist || typeof (theidlist) == "undefined") { theidlist = ""; } var thechecked = $(thechkinput).attr("checked"); if (thechecked || thechecked == "checked") { theidlist = theidlist + theID + ","; } else { theidlist = theidlist.replace(theID + ",", ""); } $("#Text1").val(theidlist); } }); </script> <style type="text/css"> #Text1 { width: 626px; } </style> </head> <body> <form id="form1" runat="server"> <div> <span>全选 <input id="CheckboxALL" type="checkbox" /></span> <ul id="myCheckList"> <li>选项一 <input onclick="$.SelectedID(this)" id="Checkbox2" type="checkbox" /></li> <li>选项二 <input onclick="$.SelectedID(this)" id="Checkbox3" type="checkbox" /></li> <li>选项三 <input onclick="$.SelectedID(this)" id="Checkbox4" type="checkbox" /></li> <li>选项四 <input onclick="$.SelectedID(this)" id="Checkbox5" type="checkbox" /></li> </ul> </div> </form> <p> <input id="Text1" type="text" /></p> </body> </html>
粗略看看,应该没有问题,但是你运行就会发现,全选出问题了。和你选择的恰好是相反。这是为什么呢???
我对底层探知有限,我怀疑是,checklist.click();方法中,他先执行的是点击事件,在后面的在进行了赋值操作。于是,偶在前面进行了一个赋值操作。
checklist.val($("#CheckboxALL").attr("checked"));但是发现还是反的,值还是反的。于是:
把全选事件改成了:
$(function() { $("#CheckboxALL").click(function() { var checklist = $("#myCheckList").find(":checkbox"); var CheckAllSelect = $("#CheckboxALL").attr("checked"); var theidlist = $("#Text1").val(); $.each(checklist, function() { if (CheckAllSelect != undefined && (CheckAllSelect || CheckAllSelect == "checked")) { $(this).attr("checked", "checked"); theidlist = theidlist + $(this).attr("id")+ ","; } else { $(this).attr("checked", "false"); theidlist = theidlist.replace($(this).attr("id")+",",""); } }); $("#Text1").val(theidlist); }); });
但是,我们会发现,这个值是不断在进行增加,却诶有进行移除。
最后检查发现:$(this).attr("checked", “false”);
这里出了问题,应该是一个布尔值,而不是一个string类型的值
修改如下:$(this).attr("checked", false);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#CheckboxALL").click(function() { var checklist = $("#myCheckList").find(":checkbox"); var CheckAllSelect = $("#CheckboxALL").attr("checked"); var theidlist = $("#Text1").val(); $.each(checklist, function() { if (CheckAllSelect != undefined && (CheckAllSelect || CheckAllSelect == "checked")) { $(this).attr("checked", "checked"); theidlist = theidlist + $(this).attr("id") + ","; } else { $(this).attr("checked", false); theidlist = theidlist.replace($(this).attr("id")+",",""); } }); $("#Text1").val(theidlist); }); }); jQuery.extend({ SelectedID: function(thechkinput) { var theID = $(thechkinput).attr("id"); var thechecked = $(thechkinput).attr("checked"); var theidlist = $("#Text1").val(); if (!theidlist || typeof (theidlist) == "undefined") { theidlist = ""; } var thechecked = $(thechkinput).attr("checked"); if (thechecked || thechecked == "checked") { theidlist = theidlist + theID + ","; } else { theidlist = theidlist.replace(theID + ",", ""); } $("#Text1").val(theidlist); } }); </script> <style type="text/css"> #Text1 { width: 626px; } </style> </head> <body> <form id="form1" runat="server"> <div> <span>全选 <input id="CheckboxALL" type="checkbox" /></span> <ul id="myCheckList"> <li>选项一 <input onclick="$.SelectedID(this)" id="Checkbox2" type="checkbox" /></li> <li>选项二 <input onclick="$.SelectedID(this)" id="Checkbox3" type="checkbox" /></li> <li>选项三 <input onclick="$.SelectedID(this)" id="Checkbox4" type="checkbox" /></li> <li>选项四 <input onclick="$.SelectedID(this)" id="Checkbox5" type="checkbox" /></li> </ul> </div> </form> <p> <input id="Text1" type="text" /></p> </body> </html>
解决,主要问题是:
1,多选的点击JS调用点击事件,是先进行调用onclick方法,在进行赋值选中或者取消选中的方式。所以在前台使用的时候要注意。
2,多选的赋值应该是布尔值 ,而不是string类型的。