Js中全选与反选功能

最新推荐文章于 2024-04-02 19:39:43 发布

我只是一个码农

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量270

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/coder_chen/article/details/52767683

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

我只是一个码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js中全选与反选功能

JS代码实现复选框的全选，取消全选的实现方法相关js代码如下：&lt;script lang="javascript" type="text/javascript"&gt;//全选 function checkAll(name) { var el = document.getElementsByTagName('input'); ...
复制链接

扫一扫