【网站 全选和单选】js 实现-点击全选按钮时，所有的按钮都会被选中或取消选中。

**网站全选和单选功能实现**

在网页开发中，我们经常需要实现全选和单选功能。全选功能是指点击一个按钮后，所有相关的控件都会被选中或取消选中，而单选功能则是指每次只能选择一个控件。下面我们将一步步地讲解如何使用JavaScript实现这些功能。

### HTML结构首先，我们需要定义HTML结构来支持全选和单选功能。

html<!-- checkbox容器 -->
<div class="checkbox-container">
 <!-- checkbox按钮 -->
 <input type="checkbox" id="check-all" />
 <label for="check-all">全选</label>
 <!-- 单个checkbox按钮 -->
 <div class="single-checkbox">
 <input type="checkbox" id="check-1" />
 <label for="check-1">选项一</label>
 </div>
 <div class="single-checkbox">
 <input type="checkbox" id="check-2" />
 <label for="check-2">选项二</label>
 </div>
 <!-- ... -->
</div>

javascript// 获取全选按钮const checkAll = document.getElementById('check-all');

// 获取所有的checkbox按钮const checkboxes = document.querySelectorAll('.single-checkbox input[type="checkbox"]');

// 全选函数function toggleCheckboxes() {
 // 如果全选按钮被选中，则将所有checkbox按钮都选中 if (checkAll.checked) {
 checkboxes.forEach((checkbox) => {
 checkbox.checked = true;
 });
 } else {
 // 否则，将所有checkbox按钮取消选中 checkboxes.forEach((checkbox) => {
 checkbox.checked = false;
 });
 }
}

// 单选函数function toggleSingleCheckbox() {
 // 如果单个checkbox按钮被选中，则将全选按钮取消选中 if (this.checked) {
 checkAll.checked = false;
 } else {
 // 否则，将全选按钮选中 checkAll.checked = true;
 }
}

// 绑定事件监听器checkAll.addEventListener('change', toggleCheckboxes);
checkboxes.forEach((checkbox) => {
 checkbox.addEventListener('change', toggleSingleCheckbox);
});

css/* checkbox容器 */
.checkbox-container {
 margin-bottom:20px;
}

/* 单个checkbox按钮 */
.single-checkbox {
 display: inline-block;
 margin-right:10px;
}

/* checkbox按钮 */
input[type="checkbox"] {
 width:15px;
 height:15px;
 margin-right:5px;
}