您的位置：首页 > Web前端 > JavaScript

JS复选框操作

2013-11-06 10:24 232 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
//全选
function checkAll() {
var code_Values = document.all['Item'];
if (code_Values.length) {
for (var i = 0; i < code_Values.length; i++) {
code_Values[i].checked = true;
}
} else {
code_Values.checked = true;
}
}

//全选
function CheckAll1(e, itemname) {
var aa = document.getElementsByName(itemname);
if (aa == undefined) return;
for (var i = 0; i < aa.length; i++) aa[i].checked = e.checked;
}

//全选、反选
function CheckAllAndReverse(value, obj) {
var form = document.getElementsByTagName("form")
for (var i = 0; i < form.length; i++) {
for (var j = 0; j < form[i].elements.length; j++) {
if (form[i].elements[j].type == "checkbox") {
var e = form[i].elements[j];
if (value == "selectAll") {
e.checked = obj.checked
}
else {
e.checked = !e.checked;
}
}
}
}
}

//反选
function uncheckAll() {
var code_Values = document.all['Item'];
if (code_Values.length) {
for (var i = 0; i < code_Values.length; i++) {
code_Values[i].checked = false;
}
} else {
code_Values.checked = false;
}
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td>方式1</td>
<td>
<input id="chkOk" type="checkbox" name="chall" value="on" onclick="CheckAllAndReverse('selectAll', this)" />全选
</td>
<td>
<input id="chkNo" type="checkbox" name="invest" value="checkbox" onclick="CheckAllAndReverse()" />反选
</td>
</tr>
<tr>
<td>方式2</td>
<td>
<input id="btnOk" type="button" value="全选" onclick="checkAll()" /></td>
<td>
<input id="btnNo" type="button" value="反选" onclick="CheckAllAndReverse()" /></td>
</tr>
<tr>
<td>方式3</td>
<td>
<input name="chkall" value="1" type="checkbox" onclick="CheckAll1(this, 'Item')" />全选</td>
<td>
</td>
</tr>
<tr>
<td>方式4</td>
<td>
<input name="chkall" value="1" type="checkbox" onclick="uncheckAll()" />取消全选</td>
<td>
<input id="Button2" type="button" value="取消全选" onclick="uncheckAll()" />
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<input type="checkbox" name="Item" />1
<input type="checkbox" name="Item" />2
<input type="checkbox" name="Item" />3
<input type="checkbox" name="Item" />4
<input type="checkbox" name="Item" />5
<input type="checkbox" name="Item" />6
<input type="checkbox" name="Item" />7
<input type="checkbox" name="Item" />8
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航