js multiple全选与取消全选实现代码



// 假设你有一个checkbox列表,它们的name属性都是"items"

// 全选
function selectAll() {
    // 获取所有name为"items"的checkbox
    var checkboxes = document.getElementsByName('items');
    // 遍历并设置它们的checked属性为true
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
    }
}

// 取消全选
function deselectAll() {
    // 同样获取所有name为"items"的checkbox
    var checkboxes = document.getElementsByName('items');
    // 遍历并设置它们的checked属性为false
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;
    }
}

// 假设你有一个全选按钮和一个取消全选按钮,可以这样绑定事件
document.getElementById('selectAllBtn').addEventListener('click', selectAll);
document.getElementById('deselectAllBtn').addEventListener('click', deselectAll);

这段代码展示了如何使用JavaScript来实现一个全选和取消全选的功能。它首先定义了两个函数`selectAll`和`deselectAll`,分别用于设置所有指定name的checkbox为选中状态或未选中状态。然后,通过给相应的按钮添加点击事件监听器,来触发这些函数。注意,你需要确保HTML中有相应的checkbox和按钮,并且它们的ID与代码中使用的ID相匹配。