javascript实现全选，反选功能

最新推荐文章于 2020-12-18 13:16:34 发布

sanfenzZ

最新推荐文章于 2020-12-18 13:16:34 发布

阅读量208

点赞数

文章标签： javascript

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下

实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的name遍历通过 if...else...判断将状态改变，原文章地址

这里需要注意括号的对应，还有拼写的正确，(我在多选按钮中少写了个c，导致操作失败)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
 //获取checkbox按钮组
 var allpro = document.getElementsByName("c1");
 //全选方法
 function change() {
    //获取全选按钮
 var all = document.getElementById("all");
 //全选按钮被选中时，遍历所有按钮
    if (all.checked) {
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox") {
     allpro[i].checked=true;

     }
     }
     //全选按钮取消
    }else{
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox") {
     allpro[i].checked=false;
     }
     }
    }
 }
 //反选的方法
 function revs() {
    //获得反选按钮
 var reverse = document.getElementById("revcheck");
 //反选按钮被选中时，遍历所有按钮
    if (reverse.checked) {
     for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
     allpro[i].checked= false;
     }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
     allpro[i].checked= true;
     }

     }
     //反选按钮取消
     }else{
        for (var i = 0; i < allpro.length; i++) {
     if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
     allpro[i].checked= false;
     }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
     allpro[i].checked= true;
     }

     }
     }
    }

</script>

</head>
<body>
    <input type="checkbox" name="c0" id="all" value="全选" onclick="change()">全选
<input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()">反选
<hr>
<table>
<tr>
<td><input type="checkbox" name="c1">上海</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">广州</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">深圳</td>
</tr>
<tr>
<td><input type="checkbox" name="c1">北京</td>
</tr>
</table>
</body>
</html>

sanfenzZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的name遍历通过 if...else...判断将状态改变，原文章地址这里需要注意括号的对应，还有拼写的正确，(我在多选按钮中少写了个c，导致操作失败)&lt;!DOCTYPE html&gt;&lt;html lang...
复制链接

扫一扫