HTML复选框全选，全部选，反选案例

最新推荐文章于 2021-06-15 13:04:27 发布

CoderJu

最新推荐文章于 2021-06-15 13:04:27 发布

阅读量2.4k

点赞数

分类专栏： HTML 文章标签： html 代码复选框全选全不选

本文为博主原创文章，转载请注明出处！谢谢！！！

本文链接：https://blog.csdn.net/system_obj/article/details/48755593

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是基于html的一个简单的复选框的全选和全不选和反选案例，代码如下：

<html>
 <head>
    <title>Document</title>
 </head>
 <body>
    <input type="checkbox" name = "sport"/>跑步<br/> 
    <input type="checkbox" name = "sport"/>游泳<br/> 
    <input type="checkbox" name = "sport"/>瑜伽<br/> 
    <input type="checkbox" name = "sport"/>足球<br/> 
    <input type="button" name = "selectall" value = "全选"    onclick="selectall()"/> 
    <input type="button" name = "selectnone" value = "全不选" onclick="selectnone()"/> 
    <input type="button" name = "selectback" value = "反选"   onclick="selectback()"/> 
</body>
<script type ="text/javascript">
    function selectall()
    {
        var sports = document.getElementsByName("sport");
        for (i=0;i<sports.length ;i++ )
        {
            var sportname =sports[i];
            sportname.checked= true;

        }
    }
    function selectnone()
    {
        var sports = document.getElementsByName("sport");
        for (i=0;i<sports.length ;i++ )
        {
            var sportname =sports[i];
            sportname.checked= false;

        }
    }
        function selectback()
    {
        var sports = document.getElementsByName("sport");
        for (a=0;a<sports.length ;a++ )
        {
            var sportname1 =sports[a];
            if(sportname1.checked==false)
            {
                sportname1.checked= true;
            }else{
                sportname1.checked=false
            }

        }
    }
</script>
</html>

CoderJu

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML复选框全选，全部选，反选案例

这是基于html的一个简单的复选框的全选和全不选和反选案例，代码如下：<html> <head> <title>Document</title> </head> <body> <input type="checkbox" name = "sport"/>跑步<br/> <input type="checkbox" name = "sport"/>游泳<br/>
复制链接

扫一扫