JavaScript检查复选框选中的值个数及值
程序员文章站
2022-04-30 18:06:00
...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript检查复选框选中的值个数及值</title>
</head>
<body>
<script language="javascript">
var i = 0;
for (;i<20;i++) {
document.write('<input type="checkbox" name="ck" value="'+i+'" /><br />');
}
document.write('<br /><input type="button" id="ckall" name="ckall" value="全选" onclick="checkall();" /> <input type="button" name="delall" value="删除所选" id="delall" />');
document.write('<br /> <label id="text" style="display:none;"></label>');
// 是否全选复选框函数
function checkall() {
var ckall = document.getElementById("ckall"); // 全选按钮对象
var ck = document.getElementsByName("ck"); // 复选框对象
// 当要执行全选时
if (ckall.value=="全选") {
var j = 0;
// 循环把复选框选中
for (;j<20;j++) {
ck[j].checked = "true";
}
ckall.value="全不选";
} else if (ckall.value=="全不选") {
// 当要执行全选时
document.getElementById("delall").disabled=false; // 去掉delall按钮的disabled
document.getElementById("delall").value="删除所选"; // 修改elall按钮的value为“删除所选”
document.getElementById("text").style.display="none"; // 设置 text 为隐藏
// 循环设置全不选
for (j=0;j<20;j++) {
ck[j].checked = null;
}
ckall.value="全选";
}
}
var delall = document.getElementById("delall");
// 点击删除按钮执行下面函数
delall.onclick=function(){
var arr = Array(); // arr为数组
var ck = document.getElementsByName("ck");
for (i=0;i<20;i++) {
if (ck[i].checked) {
arr.push(ck[i].value); // 当复选框选中中将选中的值累加到arr这个数组中
}
}
// 判断arr数组的个数，如果为0，那么就是没有选中，弹出警告信息
if (arr.length==0) {
alert('请先选中数据！');
} else if (arr.length>0){
// 下面是执行删除动作
delall.disabled=true; // 设置delall按钮为不可点
delall.value="正在删除..."; // 设置delall按钮的value为“正在删除...”
var text = document.getElementById("text");
text.style.display="block"; // 显示 text
text.style.fontSize = '12px'; // 设置字体大小
var t = "删除数据为："; // t 为text要显示的内容
for (j=0;j<arr.length;j++) {
t += arr[j]+" ";
} www.2cto.com
text.innerHTML = t;
}
}
</script>
</body>
</html> 上一篇： HTML5微信开发就业班
下一篇： smarty 模版变量的问题