JavaScript全选和取消全选

最新推荐文章于 2021-12-30 23:55:25 发布

weixin_30587025

最新推荐文章于 2021-12-30 23:55:25 发布

阅读量57

点赞数

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/wangqiang4518/p/5730998.html

版权

<html>
    <head>
        <title>全选和取消全选</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript">
            function checkAllorcancelAll(){
                //思路：1.获取checkbox的选中状态；1.1获取checkbox元素
                var chkElt = document.getElementById("chkElt");
                //1.2获取选中状态
                var checked = chkElt.checked;
                //2.若checked=true，选中所有复选框；
                //2.1获取所有复选框
                var allInterests = document.getElementsByName("interest");
                //2.2遍历取出每个复选框对象
                var mySpan = document.getElementById("mySpan");
                if(checked){
                    //全选,设置复选框的选中状态
                    for(var i=0;i<allInterests.length;i++){
                        allInterests[i].checked = true;
                    }
                    mySpan.innerHTML="取消全选";
                }else{
                    //取消全选
                    checked=false;
                    for(var i=0;i<allInterests.length;i++){
                        allInterests[i].checked = false;
                    }
                    mySpan.innerHTML="全选";
                }    
            }    
        </script>
    </head>
    <body>
        <input type = "checkbox" id="chkElt" οnclick="checkAllorcancelAll()">
        <span id="mySpan">全选</span><br>
        运动<input type = "checkbox" name="interest" value="sport" /><br>
        音乐<input type = "checkbox" name="interest" value="music" /><br>
        美食<input type = "checkbox" name="interest" value="food" /><br>
        睡觉<input type = "checkbox" name="interest" value="sleep" /><br>
        跳舞<input type = "checkbox" name="interest" value="dance" /><br>
    </body>
</html>
</html>

转载于:https://www.cnblogs.com/wangqiang4518/p/5730998.html

weixin_30587025

关注

0
点赞
踩
0

收藏

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

<html> <head> <title>全选和取消全选</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript...
复制链接

扫一扫