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

最新推荐文章于 2024-05-29 21:18:52 发布

CoderJu

最新推荐文章于 2024-05-29 21:18:52 发布

阅读量2.6k

点赞数

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

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

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

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文提供了一个基于HTML的简单示例，演示了如何通过按钮实现复选框的全选、全不选及反选功能。代码使用JavaScript来控制复选框的状态，适用于初学者了解表单元素的操作。

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

这是基于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>