1.HTML
<table>
<tr><td><input type="checkbox" id="selectAll" title="全选" /></td></tr>
<tr><td><input type="checkbox" class="ck" name="ck" value="1" /></td></tr>
<tr><td><input type="checkbox" class="ck" name="ck" value="2" /></td></tr>
<tr><td><input type="checkbox" class="ck" name="ck" value="3" /></td></tr>
<tr><td><input type="button" id="getSelecteds" value="得到选择的" /></td></tr>
</table>
2.JS
2.1 jQuery版本
<script>
//全选/取消全选操作
//注意:要用checkbox做点击事件。
$(function () {
$("#selectAll").click(function () {
var cb = $(".ck");//代表所有多选框
for (var i = 0; i < cb.length; i++) {
cb[i].checked = this.checked;
}
});
});
//得到选择的
$("#getSelecteds").click(function () {
//判断是否有一个复选框被选中,如果有就把值获取到
var b = false;
var ck = $(".ck");
var v = "";
for (var i = 0; i < ck.length; i++) {
if (ck[i].checked) {
b = true;
v += ck[i].value + ",";
}
}
v = v.substring(0, v.length - 1);//去掉最后一个“,”号
//提交 并检查是否有选择的
if (b) {
alert(v);
}
else {
alert("未选择任何复选框");
}
});
</script>
2.2 JS版本:
<script>
function getId(id) { return document.getElementById(id); }
window.onload = function () {
//全选/取消全选操作
getId("selectAll").onclick = function () {
var ck = document.getElementsByClassName("ck");
for (var i = 0; i < ck.length; i++) {
ck[i].checked = this.checked;
}
};
//得到选择的
getId("getSelecteds").onclick = function () {
//判断是否有一个复选框被选中,如果有就把值获取到
var b = false;
var ck = document.getElementsByClassName("ck");
var v = "";
for (var i = 0; i < ck.length; i++) {
if (ck[i].checked) {
b = true;
v += ck[i].value + ",";
}
}
v = v.substring(0, v.length - 1);//去掉最后一个“,”号
//提交 并检查是否有选择的
if (b) {
alert(v);
}
else {
alert("未选择任何复选框");
}
};
}//window.onloat结束
</script>