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

Posted 紫郢剑侠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JavaScript编程控制网页上checkbox选择状态:全选全部取消反选相关的知识,希望对你有一定的参考价值。

在写一个“圳品”信息系统,需要提供按条件筛选功能,于是需要用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>         

以上是关于用JavaScript编程控制网页上checkbox选择状态:全选全部取消反选的主要内容,如果未能解决你的问题,请参考以下文章

网页编程是一定要用javascript还是可以用c么

JavaScript一

HTML---网页编程

JavaScript

用Autoit编程软件,如何读取屏幕上的信息?Autoit高手进!

网页编程:用javascript里的window.open打开一个窗口后,想在关闭页后再刷新父页面,怎么办呢?