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