全选功能。页面有4个复选框和一个按钮，按钮初始化是不可用状态。实现以下功能。(1)单击“全选”复选框，同时选中或取消选中运动、唱歌和写代码复选框。(2)运动、唱歌和写代码复选框都选中时，全选复选框也同

全选功能是一种常见的用户界面设计，用于简化选择操作。在您的场景中，可以使用JavaScript来实现这一功能。以下是实现这个功能的一个简单步骤：

1. 首先，在HTML部分，为每个复选框和全选按钮添加适当的ID或class，以便于在JavaScript中引用它们。例如：

<input type="checkbox" id="select-all" disabled>
<label for="select-all">全选</label>

<input type="checkbox" id="sports" name="skills">
<label for="sports">运动</label>
<input type="checkbox" id="singing" name="skills">
<label for="singing">唱歌</label>
<input type="checkbox" id="coding" name="skills">
<label for="coding">写代码</label>
<button id="toggle-all">全选</button>

2. 在JavaScript部分，编写事件监听器来处理用户的交互：

const selectAll = document.getElementById('select-all');
const skillsCheckboxes = document.querySelectorAll('input[name="skills"]');
let areSkillsChecked = false;

// 初始化函数
function initSelectAll() {
  skillsCheckboxes.forEach((checkbox) => checkbox.checked = false);
  selectAll.disabled = true;
}

// 绑定全选按钮点击事件
selectAll.addEventListener('click', function() {
  if (this.checked) {
    skillsCheckboxes.forEach(function(checkbox) {
      checkbox.checked = true;
      areSkillsChecked = true;
    });
  } else {
    skillsCheckboxes.forEach(function(checkbox) {
      checkbox.checked = false;
      areSkillsChecked = false;
    });
  }
  
  this.disabled = !areSkillsChecked;
});

// 当技能复选框变化时更新全选状态
skillsCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    if (skillsCheckboxes.every(function(box) { return box.checked; })) {
      selectAll.checked = true;
      selectAll.disabled = false;
    } else {
      selectAll.checked = false;
      selectAll.disabled = true;
    }
  });
});

// 初始化全选按钮
initSelectAll();

此代码首先初始化全选按钮，然后给每个技能复选框添加事件监听器，当单个复选框状态改变时，会检查所有技能复选框是否都被勾选，并相应地更新全选的状态。