关于checkbox你不得不注意的事情

来源：互联网发布：开源商城cms 编辑：程序博客网时间：2024/04/30 09:29

今天搞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类型的。