如何在原生JavaScript中实现全选Div后启用提交按钮？

没问题，我来帮你搞定这个需求！先梳理下现有代码里的几个小细节问题，再给你完整的纯JavaScript实现方案：

现有代码的小问题 #

1. document.querySelectorAll('selected') 写错了选择器，类选择器需要加.，应该是document.querySelectorAll('.selected')
2. getElementsByClassName返回的是动态HTML集合，直接遍历没问题，但后续检查全选状态时用数组方法会更方便
3. 提交按钮默认应该是禁用状态，这样用户一开始就不能点击

完整修改后的代码 #

HTML（给按钮添加默认禁用状态）

<section class='container'>
  <ul class="cards">
    <li class="cardItm">
      <div class="card"> card items </div>
    </li>
    <!-- 这里可以添加任意动态生成的card项 -->
    <li class="cardItm">
      <div class="card"> card items 2 </div>
    </li>
    <li class="cardItm">
      <div class="card"> card items 3 </div>
    </li>
  </ul>
  <button class='btn' disabled>Submit</button>
</section>

CSS（可选：给禁用按钮添加样式提示）

.card.selected{ background: #0173fb; }
/* 禁用状态的按钮样式，提升用户体验 */
.btn:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  border: none;
}

JavaScript（两种实现方式，根据你的card是否动态生成选择）

方式1：静态Card（页面加载时就存在的card）

// 把HTMLCollection转换成数组，方便使用数组方法
const cards = Array.from(document.getElementsByClassName('card'));
const submitBtn = document.querySelector('.btn');

// 定义检查全选状态的函数
function checkAllCardsSelected() {
  // 用every方法判断所有card是否都包含selected类
  const isAllSelected = cards.every(card => card.classList.contains('selected'));
  // 按钮的禁用状态取反：全选则启用，否则禁用
  submitBtn.disabled = !isAllSelected;
}

// 给每个card绑定点击事件
cards.forEach(card => {
  card.addEventListener('click', function() {
    // 给当前点击的card添加selected类
    this.classList.add('selected');
    // 点击后立即检查全选状态
    checkAllCardsSelected();
  });
});

方式2：动态生成的Card（后续通过JS添加的card）

如果你的card是动态生成的（比如通过AJAX请求加载、用户操作新增），推荐用事件委托的方式，不用每次生成新card都重新绑定事件：

const cardsContainer = document.querySelector('.cards');
const submitBtn = document.querySelector('.btn');

// 监听父容器的点击事件，通过事件冒泡处理子元素
cardsContainer.addEventListener('click', function(e) {
  // 找到点击事件源对应的最近的.card元素
  const targetCard = e.target.closest('.card');
  if (targetCard) {
    // 添加selected类
    targetCard.classList.add('selected');
    // 重新获取当前所有的card（因为是动态生成的，初始数组可能不包含新元素）
    const currentCards = Array.from(document.getElementsByClassName('card'));
    // 检查所有card是否都被选中
    const isAllSelected = currentCards.every(card => card.classList.contains('selected'));
    // 更新按钮状态
    submitBtn.disabled = !isAllSelected;
  }
});

关键逻辑说明 #

• Array.from()：把getElementsByClassName返回的动态集合转换成数组，这样可以使用数组的every方法快速判断所有元素是否满足条件
• every()方法：遍历数组，只有当所有元素都返回true时，整个方法才返回true，正好用来判断是否所有card都被选中
• 事件委托：通过监听父元素的点击事件，处理子元素的交互，完美适配动态生成的元素，避免重复绑定事件的麻烦

内容的提问来源于stack exchange，提问作者Bhanumathi-a