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

简介: 用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>
相关文章
|
2月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
130 56
|
1月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
341 58
|
2月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
83 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
1月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
3月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
8月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
425 1
|
4月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
252 2
|
9月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
9月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
7月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
223 5