js全选和全不选代码

在JavaScript中，全选和全不选的功能通常与HTML的表单元素（如复选框）一起使用。下面是一个简单的示例，演示如何使用JavaScript实现全选和全不选的功能：

HTML部分：

html复制代码
<input type="checkbox" id="selectAll"> 全选/全不选  
<br>  
<input type="checkbox" class="item"> 项目1  
<input type="checkbox" class="item"> 项目2  
<input type="checkbox" class="item"> 项目3  
<input type="checkbox" class="item"> 项目4

JavaScript部分：

javascript复制代码
document.getElementById('selectAll').addEventListener('change', function() {  
    var checkboxes = document.getElementsByClassName('item');  
    for (var i = 0; i < checkboxes.length; i++) {  
        checkboxes[i].checked = this.checked;  
    }  
});  
  
document.querySelectorAll('.item').forEach(function(checkbox) {  
    checkbox.addEventListener('change', function() {  
        var allChecked = true;  
        var anyChecked = false;  
        document.querySelectorAll('.item').forEach(function(otherCheckbox) {  
            if (!otherCheckbox.checked) {  
                allChecked = false;  
            } else {  
                anyChecked = true;  
            }  
        });  
        document.getElementById('selectAll').checked = allChecked;  
        if (!allChecked && anyChecked) {  
            document.getElementById('selectAll').indeterminate = true;  
        } else {  
            document.getElementById('selectAll').indeterminate = false;  
        }  
    });  
});

这段代码首先为全选复选框添加了一个事件监听器，当它的状态改变时，它会遍历所有的项目复选框并将它们的状态设置为与全选复选框相同。然后，它为每个项目复选框添加了一个事件监听器，当它们的状态改变时，它会检查是否所有的项目复选框都被选中，或者是否有任何项目复选框被选中。根据这些条件，它会更新全选复选框的状态，并在必要时设置其indeterminate属性以表示部分选中的状态。

在上面的示例中，我们实现了全选和全不选的基本功能，但是全选按钮的状态并没有考虑到部分选中的情况。在实际应用中，我们通常希望全选按钮能够表示三种状态：全部选中、部分选中（通常显示为半选状态）和全部未选中。

然而，标准的HTML复选框并不支持第三种“部分选中”的状态。为了实现这个效果，我们可以使用自定义的CSS样式来模拟这种半选状态，或者使用原生的<input type="checkbox">元素的indeterminate属性（在某些浏览器和上下文中可能不受支持）。

由于indeterminate属性主要用于<input type="checkbox">作为树形控件中的父节点，而不是直接用于表示部分选中，因此这里我们使用CSS来模拟半选状态。

首先，我们需要在CSS中定义半选状态的样式：

css复制代码
/* 半选状态的样式 */  
#selectAll.partially-checked {  
    position: relative;  
}  
  
#selectAll.partially-checked::after {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 50%; /* 或者其他你想要的宽度 */  
    height: 100%;  
    background-color: #000; /* 或者其他你想要的颜色 */  
    opacity: 0.5; /* 半透明效果 */  
    z-index: 1;  
}

然后，在JavaScript中，我们需要更新全选按钮的状态以反映部分选中的情况：

javascript复制代码
document.getElementById('selectAll').addEventListener('change', function() {  
    var checkboxes = document.getElementsByClassName('item');  
    var allChecked = true;  
    var noneChecked = true;  
    for (var i = 0; i < checkboxes.length; i++) {  
        if (!checkboxes[i].checked) {  
            allChecked = false;  
        } else {  
            noneChecked = false;  
        }  
    }  
    // 根据项目复选框的选中情况设置全选按钮的状态  
    if (allChecked) {  
        this.checked = true;  
        this.classList.remove('partially-checked');  
    } else if (noneChecked) {  
        this.checked = false;  
        this.classList.remove('partially-checked');  
    } else {  
        // 部分选中状态  
        this.checked = true; // 通常设置为选中，但样式表示部分选中  
        this.classList.add('partially-checked');  
    }  
});  
  
document.querySelectorAll('.item').forEach(function(checkbox) {  
    checkbox.addEventListener('change', function() {  
        updateSelectAll();  
    });  
});  
  
function updateSelectAll() {  
    var checkboxes = document.getElementsByClassName('item');  
    var allChecked = true;  
    var noneChecked = true;  
    for (var i = 0; i < checkboxes.length; i++) {  
        if (!checkboxes[i].checked) {  
            allChecked = false;  
        } else {  
            noneChecked = false;  
        }  
    }  
    document.getElementById('selectAll').checked = allChecked;  
    if (!allChecked && !noneChecked) {  
        document.getElementById('selectAll').classList.add('partially-checked');  
    } else {  
        document.getElementById('selectAll').classList.remove('partially-checked');  
    }  
}

在这个更新后的代码中，我们添加了一个updateSelectAll函数，它会在任何一个项目复选框的状态改变时被调用。这个函数会遍历所有的项目复选框，检查它们是否全部被选中或全部未被选中，并据此更新全选按钮的状态。如果部分复选框被选中，则全选按钮将被设置为选中状态，并应用partially-checked类以显示半选样式。

这种方法依赖于CSS来模拟半选状态，因此它可能不会像原生的indeterminate属性那样在所有浏览器中都表现得完全一致。在实际项目中，你可能需要根据目标用户群体和浏览器兼容性要求来调整实现方式。