用JavaScript编程控制网页上checkbox选择状态：全选、全部取消、反选

最新推荐文章于 2024-11-06 13:48:22 发布

紫郢剑侠

最新推荐文章于 2024-11-06 13:48:22 发布

阅读量1k

点赞数

分类专栏：开源世界原创作品源码解析文章标签： HTML JavaScrpt checkbox 设置编程

本文链接：https://blog.youkuaiyun.com/Purpleendurer/article/details/128727756

版权

原创作品同时被 3 个专栏收录

284 篇文章

订阅专栏

源码解析

139 篇文章

订阅专栏

开源世界

16 篇文章

订阅专栏

在写一个“圳品”信息系统，需要提供按条件筛选功能，于是需要用JavaScript编程控制网页上checkbox选择状态，提供三个按钮：全选、全部取消、反向选择。

代码如下：

<!DOCTYPE html>
<html>
    <title>河池“圳品”信息</title>
</head>
<body>
<div id="divArea">
    县（区）： <input type="checkbox" checked="true" name="jcj" >金城江</input> <input type="checkbox"  checked="true" name="yz">宜州</input> <input type="checkbox"  checked="true" name="lc">罗城</input>  <input type="checkbox" checked="true" name="hj">环江</input>  <input type="checkbox"  checked="true"name="nd">南丹</input>  <input type="checkbox" checked="true" name="te">天峨</input>  <input type="checkbox" checked="true" name="dl">东兰</input> <input type="checkbox" checked="true" name="bm">巴马</input> <input type="checkbox" checked="true" name="fs">凤山</input>  <input type="checkbox" checked="true" name="da">都安</input>  <input type="checkbox" checked="true" name="dh">大化</input>   <input type="button" value="全选" onclick="checkedAllArea()" /> <input type="button" value="全部取消" onclick="uncheckedAllArea()" /> <input type="button" value="反选" onclick="reverseCheckArea()" />
</div>

<script>
var divArea = document.getElementById("divArea");
var checkArea = divArea.getElementsByTagName("input");

//全选
function checkedAllArea()
{
    for (i=0; i < 11; i++)
    {
        checkArea[i].checked = true;
    }
}

//全部取消
function uncheckedAllArea()
{
    for (i=0; i < 11; i++)
    {
        checkArea[i].checked = false;
    }
}

//反选
function reverseCheckArea()
{
    for (i=0; i < 11; i++)
    {
        checkArea[i].checked = !checkArea[i].checked;
    }
}

</script>
</body>
</html>