JavaScript实现复选框多选功能的源代码示例

这段代码提供了两个JavaScript函数，用于实现HTML复选框的多选功能，主要应用于表单中。首先来看`checkAll`函数，它有两个版本：一个是`checkAll(theForm, cName, status)`，另一个简化版是`checkAll(theForm, cName)`。 1. `checkAll`函数详解： - `checkAll`函数接收三个参数： - `theForm`：要操作的表单对象，通过`getElementById`方法获取到表单的引用。 - `cName`：一个字符串，表示复选框的类名，用于匹配表单中的元素。 - `status`：布尔值，表示复选框是否应被选中（true选中，false不选中）。在`status`版本的函数中，如果省略第三个参数，将默认根据调用函数时`this.checked`的值来决定复选框的状态。 2. 代码结构与功能： - 函数内部遍历表单元素，通过`elements[i].className.indexOf(cName)`判断元素是否属于指定类名（如`results1`或`results2`）。 - 如果找到匹配的复选框，设置其`checked`属性为传入的`status`值或`this.checked`值（在简化版中），从而实现全选或取消全选的功能。 - 在表单中，用户可以点击“Select All/None”按钮，调用对应的`checkAll`函数，所有具有指定类名的复选框状态会同步改变。 3. 应用场景： - 这个功能常用于需要批量处理多个复选框的选择情况，例如在选择选项组时，一次切换所有相关项的选中状态，提高用户体验。 4. 使用示例： - 在HTML中，只需为每个“Select All/None”按钮添加`onclick`事件，调用`checkAll`函数，并传入相应的类名，如`<input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results1', this.checked);" />`。 总结来说，这段代码提供了一种简单且实用的方法来管理HTML复选框的多选状态，使得用户能够方便地控制整个复选框组的一致性，增强了表单交互的易用性。