js 实现全选全不选反选

最新推荐文章于 2018-10-21 05:44:49 发布

暖风nf

最新推荐文章于 2018-10-21 05:44:49 发布

阅读量316

点赞数 1

分类专栏： js 文章标签： js

js 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript来控制一组复选框的状态，包括全选、全不选及反选功能。示例中详细展示了如何通过获取页面元素并利用JavaScript来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <h1>你的呢爱好很广泛！！</h1>  
    <br>  
    <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选  
    <br>  
    <input type="checkbox" name="items" value="足球">足球  
    <input type="checkbox" name="items" value="篮球">篮球  
    <input type="checkbox" name="items" value="游泳">游泳  
    <input type="checkbox" name="items" value="唱歌">唱歌  
    <br>  
    <input type="button" name="checkall" id="checkall" value="全选">  
    <input type="button" name="checkall" id="checkNo" value="全不选">  
    <input type="button" name="checkall" id="checkReverse" value="反选">  
    <script type="text/javascript">  
          
        // 处理全选  
        document.getElementById('checkall').onclick=function(){  
        /*************************************************/           
            // 获取所有的复选框  
            var checkElements=document.getElementsByName('items');  
            for(var i=0;i<checkElements.length;i++){  
                var checkElement=checkElements[i];  
                // 方法一  
                // checkElement.setAttribute('checked',' checked');  
                // 方法二  
                checkElement.checked="checked";  
            }  
        }  
        /*************************************************/  
        // 处理全不选  
        document.getElementById('checkNo').onclick=function(){  
            // 获取所有的复选框  
            var checkElements=document.getElementsByName('items');  
            for(var i=0;i<checkElements.length;i++){  
                var checkElement=checkElements[i];  
                // 方法一火狐不支持  
                // checkElement.setAttribute('checked',null);  
                // 方法二 火狐和ie都支持  
                checkElement.checked=null;  
            }  
        }  
/******************************************************************/  
        //反选  
         document.getElementById('checkReverse').onclick=function(){  
            // 获取所有的复选框  
            var checkElements=document.getElementsByName('items');  
            for(var i=0;i<checkElements.length;i++){  
                var checkElement=checkElements[i];  
                if (checkElement.checked) {  
                    checkElement.checked=null;  
                }  
                else{  
                    checkElement.checked="checked";  
                }  
                // 方法一  
                // checkElement.setAttribute('checked',null);  
                // 方法二 火狐和ie都支持  
                  
            }  
        }  
/***********************************************************/  
        //全选/不选  
        document.getElementById('checkItems').onclick=function()  
        {  
         // 获取所有的复选框  
            var checkElements=document.getElementsByName('items');  
            if (this.checked) {  
                for(var i=0;i<checkElements.length;i++){  
                    var checkElement=checkElements[i];  
                    checkElement.checked="checked";  
                }  
  
            }  
            else{  
                for(var i=0;i<checkElements.length;i++){  
                    var checkElement=checkElements[i];  
                    checkElement.checked=null;  
                }  
            }  
  
        }  
</script>  
</body>  
</html>