JavaScript全选/反选/取消全选

最新推荐文章于 2024-07-24 16:20:17 发布

相太阳

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weishenme/p/10822036.html

版权

JavaScript之全选，取消全选，反选


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选，取消全选，反选</title>
    <script type="text/javascript">
        function checkAll(){   　　　　　　//全选
            var  all = document.getElementsByName("song");　　//找到目标选项
            for(var i = 0 ;i<all.length;i++){　　　　//遍历，在赋值
                all[i].checked=true;
            }
        }

        function cancelAll(){　　　　//取消全选
            var all =document.getElementsByName("song");　　　　//找到目标选项
            for(var i=0;i<all.length;i++){　　　　//遍历，再赋值
                all[i].checked=false;
            }
        }
        function reverse(){　　　　//反选
            var all =document.getElementsByName("song");　　　　//找到目标选项
            for(var i=0;i<all.length;i++){　　　　//遍历，先判断，然后给赋予相反的值
                if(all[i].checked==true){
                    all[i].checked=false;
                }else{
                    all[i].checked=true;
                }
            }
        }

    </script>


</head>
<body>
<input type="button" value="全选"   οnclick="checkAll()"/>　　//找到方法
<input type="button" value="取消全选"   οnclick="cancelAll()" />　//找到方法


<input type="button" value="反选"  οnclick="reverse()"/>　　　　//找到方法
<hr/>
    <input type="checkbox" name="song"/> 铁血丹心<br/>
    <input type="checkbox" name="song"/> 火<br/>
    <input type="checkbox" name="song"/> 大海<br/>
    <input type="checkbox" name="song"/> 好汉歌<br/>
    <input type="checkbox" name="song"/> 我们不一样<br/>
    <input type="checkbox" name="song"/> 成都<br/>
    <input type="checkbox" name="song"/> 半壶纱<br/>
    <input type="checkbox" name="song"/> 你还要我怎样<br/>
    <input type="checkbox" name="song"/> 一生所爱<br/>
    <input type="checkbox" name="song"/> 追光者<br/>
</body>
</html>

转载于:https://www.cnblogs.com/weishenme/p/10822036.html

相太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全选/反选/取消全选

JavaScript之全选，取消全选，反选<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>全选，取消全选，反选</title> <script type="text/javascript"> fu...
复制链接

扫一扫