关于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类型的。
浙公网安备 33010602011771号