正文

巧用JavaScript绑定复选框事件，轻松实现多选交互体验

/0 浏览量
0403

在网页设计中，复选框是实现多选交互的常用元素。通过JavaScript，我们可以轻松地为复选框绑定事件，实现丰富的交互体验。本文将详细介绍如何使用JavaScript绑定复选框事件，实现以下功能：

  1. 全选/全不选
  2. 反选
  3. 单选
  4. 禁用/启用复选框
  5. 显示选中项数量

1. 全选/全不选

首先，我们需要创建一组复选框，并为它们设置相同的名称。接下来，我们可以编写一个函数来控制所有复选框的选中状态。

<!DOCTYPE html>
<html>
<head>
    <title>全选/全不选</title>
</head>
<body>
    <input type="checkbox" id="selectAll" onclick="toggleCheckboxes(this)"> 全选
    <br>
    <div>
        <input type="checkbox" name="option"> 选项1<br>
        <input type="checkbox" name="option"> 选项2<br>
        <input type="checkbox" name="option"> 选项3<br>
        <input type="checkbox" name="option"> 选项4<br>
    </div>

    <script>
        function toggleCheckboxes(checkbox) {
            var checkboxes = document.getElementsByName('option');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = checkbox.checked;
            }
        }
    </script>
</body>
</html>

2. 反选

反选功能可以通过遍历所有复选框并切换它们的选中状态来实现。

function reverseCheckboxes() {
    var checkboxes = document.getElementsByName('option');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = !checkboxes[i].checked;
    }
}

3. 单选

单选功能要求所有复选框中只能有一个被选中。我们可以通过禁用其他复选框来实现。

function singleSelect(checkbox) {
    var checkboxes = document.getElementsByName('option');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] !== checkbox) {
            checkboxes[i].disabled = true;
        }
    }
}

4. 禁用/启用复选框

禁用或启用复选框可以通过修改复选框的 disabled 属性来实现。

function disableCheckboxes(disabled) {
    var checkboxes = document.getElementsByName('option');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].disabled = disabled;
    }
}

5. 显示选中项数量

显示选中项数量可以通过遍历所有复选框并计算选中复选框的数量来实现。

function countChecked() {
    var checkboxes = document.getElementsByName('option');
    var checkedCount = 0;
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            checkedCount++;
        }
    }
    document.getElementById('count').innerText = '已选中 ' + checkedCount + ' 项';
}

// 添加事件监听器
window.onload = function() {
    document.getElementById('selectAll').onclick = countChecked;
};

通过以上方法，我们可以轻松地使用JavaScript绑定复选框事件，实现丰富的多选交互体验。在实际开发中，可以根据具体需求进行扩展和优化。

-- 展开阅读全文 --