效果：
html:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> </head> <body> <form method="post"> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle"> <table width="40%" border="1" align="center" cellpadding="0" cellspacing="0"> <input name="ids" id="ids" type="hidden" value="" /> <input name="names" id="names" type="hidden" value="" /> <tr> <td style=" 10%; cursor: pointer;" onclick="selectAllCheckBox('td_selected_all');" id="td_selected_all"> 全选 </td> <td style=" 30%"> 城市 </td> </tr> <tr> <td> <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a1" value="北京" /> </td> <td> 北京 </td> </tr> <tr> <td> <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a2" value="天津" /> </td> <td> 天津 </td> </tr> <tr> <td> <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a3" value="重庆" /> </td> <td> 重庆 </td> </tr> <tr> <td> <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a4" value="上海" /> </td> <td> 上海 </td> </tr> </table> </td> </tr> </table> </form> </body> </html>
js:
<script type="text/javascript" language="javascript">
//默认全选
document.getElementById("td_selected_all").innerHTML = "全选";
//点击多选框触发的事件
function chooseTeacher(checkBox) {
selectCheckBox(checkBox);
}
//获取当前选中对象的id及value
function selectCheckBox(checkBox) {
var ids = $("#ids").val();
var names = $('#names').val();
//添加
if (checkBox.checked == true) {
if (ids != "") {
ids = "," + ids + "," + checkBox.id + ",";
names = "," + names + "," + checkBox.value + ",";
}
else {
ids = "," + checkBox.id + ",";
names = "," + checkBox.value + ",";
}
}
//删除
else {
ids = "," + ids + ",";
names = "," + names + ",";
if (ids.indexOf("," + checkBox.id + ",") > -1) {
ids = ids.replace("," + checkBox.id + ",", ",");
names = names.replace("," + checkBox.value + ",", ",");
}
}
//去掉末尾逗号
if (ids.length > 1) {
ids = ids.substring(1, ids.length - 1);
}
else {
ids = "";
}
if (names.length > 1) {
names = names.substring(1, names.length - 1);
}
else {
names = "";
}
//赋值,做数据处理。
$("#ids").attr("value", ids);
$("#names").attr("value", names);
}
//全选、反选
function selectAllCheckBox(msg_id) {
var flag = isAllChecked();
//循环表单里的所有元素
for (var i = 0; i < document.forms[0].elements.length; i++) {
//如果是多选框的话
if (document.forms[0].elements[i].type == 'checkbox') {
//获取当前元素
var obj = document.forms[0].elements[i];
if (flag) {
if (obj.checked) {
obj.checked = false;
//记录id和value
selectCheckBox(obj);
}
}
else {
if (!obj.checked) {
obj.checked = true;
//记录id和value
selectCheckBox(obj);
}
}
}
}
if (msg_id != null) {
var obj = document.getElementById(msg_id);
var msg = "全选";
if (!flag) {
msg = "反选";
}
obj.innerHTML = msg;
}
}
//判断多选框是否本选中
//为ture ：则是反选，需要去掉所有的checked
//为false：则是全选，需要加上所有的checked
function isAllChecked() {
var flag = true;
//index :选择器的index位置,即当前元素的索引,从0开始
//domEle:当前的元素(也可使用 "this" 选择器)
$(":checkbox").each(function(index, domEle) {
//判断是否有未选中的
if (!$(domEle).attr("checked")) {
if (document.getElementById("td_selected_all").innerHTML == "全选") {
flag = false;
return false;
} else {
flag = true;
return false;
}
}
});
return flag;
}
</script>