javascript中DOM复选框选择用法实例
本文将详细介绍如何在JavaScript中使用DOM复选框选择功能,并通过实例如何实现全选与反选技巧。让我们一起吧!
让我们创建一个HTML页面,其中包含一些复选框和三个按钮:全选、全清和反选。页面的结构如下:
```html
// 获取所有复选框对象的数组
function GetAllCheckBox() {
var div = document.getElementById("Balls");
var inputs = div.getElementsByTagName("input");
var checkboxs = []; // 用于存储复选框对象的数组
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
checkboxs.push(inputs[i]); // 将复选框对象添加到数组中
}
}
return checkboxs; // 返回复选框数组
}
// 全选功能
function selAll() {
var checkboxs = GetAllCheckBox(); // 获取所有复选框对象数组
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].checked = true; // 将所有复选框设置为选中状态
}
}
// 全清功能
function clearAll() {
var checkboxs = GetAllCheckBox(); // 获取所有复选框对象数组
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].checked = false; // 将所有复选框设置为未选中状态
}
}
// 反选功能
function reverseAll() {
var checkboxs = GetAllCheckBox(); // 获取所有复选框对象数组
for (var i = 0; i < checkboxs.length; i++) {
编程语言
- javascript中DOM复选框选择用法实例
- jetbrains mono字体安装方法(推荐)
- php简单实现多字节字符串翻转的方法
- jQuery检测返回值的数据类型
- jsp输出金字塔的简单实例
- win8.1安装mysql5.6时遇到问题解决方案
- 基于vue2.x的电商图片放大镜插件的使用
- JS两个数组比较,删除重复值的巧妙方法(推荐)
- JavaScript使用slice函数获取数组部分元素的方法
- jquery获取所有选中的checkbox实现代码
- Vue-路由导航菜单栏的高亮设置方法
- Centos7下MySQL安装教程
- php 获取xml接口数据的处理方法
- JavaScript 日期时间选择器一些小结
- PHP循环函数使用介绍之PHP基础入门教程
- MSSQL附加数据库拒绝访问提示5120错误的处理方法