1、通过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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name) {
var el = document.getElementsByTagName('input');
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for (var i = 0; i < len; i++) {
if ((el[i].type == "checkbox") && (el[i].name == name)) {
el[i].checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for (var i = 0; i < len; i++) {
if ((el[i].type == "checkbox") && (el[i].name == name)) {
el[i].checked = false;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value=""
onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }">字母全选开关
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }">数字全选开关
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
</form>
</body>
</html> 2、通过按钮实现全选/全不选：
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title> checkbox和按钮实现的多选框全选功能 </title>
<script type="text/javascript">
//说明：Javascript控制CheckBox的全选与取消全选
function checkAll(name) {
var el = document.getElementsByTagName('input');
var flag = true;
//取document中所有的input，比如文本输入框、按钮等元件，全都取出来存入数组，可以用el.length取数量，el[i]取内容
var len = el.length;
for (var i = 0; i < len; i++) {
if ((el[i].type == "checkbox") && (el[i].name == name)) {
if (el[i].checked == true) {//判断第一个checkbox是否已经选中
flag = false;
} else {
flag = true;
}
break;
}
}
for (var i = 0; i < len; i++) {
if ((el[i].type == "checkbox") && (el[i].name == name)) {
el[i].checked = flag;
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="test" value="a">a
<input type="checkbox" name="test" value="b">b
<input type="checkbox" name="test" value="c">c
<input type="checkbox" name="test" value="d">d
<input type="checkbox" name="test" value="e">e
<input type="checkbox" name="test" value="f">f
<input type="checkbox" name="test" value="g">g
<br>
<input type="checkbox" name="num" value="1">1
<input type="checkbox" name="num" value="2">2
<input type="checkbox" name="num" value="3">3
<br>
<input type="button" value="选择/清空所有的字母" onclick="checkAll('test')">
<br>
<input type="button" value="选择/清空所有的数字" onclick="checkAll('num')">
</form>
</body>
</html> 3、表格全选/全不选
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>复选框选中效果</title>
<style type="text/css">
.ct {
text-align: center;
}
</style>
<script type="text/javascript">
function allCheck() {
var obj = document.getElementsByTagName("input");
if (document.getElementById("all").checked == true) {
for (var i = 0; i < obj.length; i++) {
obj[i].checked = true;
}
} else {
for (var i = 0; i < obj.length; i++) {
obj[i].checked = false;
}
}
}
function checkT_F() {
var obj = document.getElementsByTagName("input");
var j = 0;
for (var i = 0; i < obj.length; i++) {
if (obj[i].id != 'all') { //如果是复选框
if (obj[i].checked == true) { //并且为选中
j++;
}
}
}
if (j == (obj.length - 1)) { //如果复选框选中的数量等于（复选框总和减去全选这个选框的数量）
document.getElementById("all").checked = true; //全选被激活
} else {
document.getElementById("all").checked = false; //取消全选
}
}
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0" class="ct" onclick="javascript:checkT_F()">
<tr>
<td><input type="checkbox" id="all" name="allCK" onclick="javascript:allCheck()"/>全选</td>
<td>产品名称</td>
<td>价格(元)</td>
<td>数量</td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
<td>诺基亚N85手机</td>
<td>2589</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
<td>佳能数码相机</td>
<td>1850</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
<td>戴尔键盘</td>
<td>1834</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
<td>华为手机</td>
<td>3432</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" id="5"/></td>
<td>iphone</td>
<td>4000</td>
<td>20000</td>
</tr>
<tr>
<td><input type="checkbox" id="6"/></td>
<td>华硕笔记本</td>
<td>6988</td>
<td>5</td>
</tr>
<tr align="left">
<td colspan="4"> 删除选中的产品</td>
</tr>
</table>
</body>
</html>
2965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
