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

Js中全选与反选功能

2016-10-09 15:59 246 查看

JS代码实现复选框的全选，取消全选的实现方法

相关js代码如下：

<script lang="javascript" type="text/javascript">
//全选
function checkAll(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 = 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;
}
}
}
//取消权限的选中事件
function doSome(a) {
document.getElementById('test').checked = false;
if (!a.checked) {
a.checked = false;
} else {
a.checked = true;
}
}
</script>

简单看一下html页面，代码如下：

<html>
<head>
<title>复选框的基本操作</title>
</head>
<body>
<table>
<tr>
<td><input id='test' type="checkbox" style="margin - right: 5px; " name="stuAll" onclick="if (this.checked== true) { checkAll('stu');} else { clearAll('stu');}"/>全选</td>
<td>序号</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" onclick="doSome(this)"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" onclick="doSome(this)"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="stu" onclick="doSome(this)"/></td>
<td>3</td>
</tr>
</body>
</html>

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

标签： javascript

相关文章推荐

新的分享

章节导航