如何用原生JS为Bootstrap单选按钮添加事件监听器实现商店筛选

没问题，用原生JS搞定这个需求完全可行，我给你整理一套实用的步骤和代码示例，你可以直接套用或者根据自己的HTML结构调整~

第一步：先搭好Bootstrap单选组的基础HTML（参考） #

因为你没提供具体HTML，我先给一个符合Bootstrap规范的单选组结构，你可以照着调整：

<div class="filter-group">
  <h5>筛选商品</h5>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="productFilter" id="filterAll" value="all" checked>
    <label class="form-check-label" for="filterAll">全部商品</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="productFilter" id="filterOnSale" value="on-sale">
    <label class="form-check-label" for="filterOnSale">促销商品</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="productFilter" id="filterNewArrival" value="new-arrival">
    <label class="form-check-label" for="filterNewArrival">新品上市</label>
  </div>
</div>

注意：同一组单选按钮的name属性必须完全一致，这样Bootstrap才会把它们识别为互斥的选项。

第二步：原生JS实现监听与筛选逻辑 #

我给你两种方案，你可以根据自己的场景选择：

方案1：直接给每个单选按钮绑定点击事件（适合静态页面） #

这种方法简单直接，适合页面加载后就固定的单选按钮：

// 等DOM加载完成再执行代码，避免获取不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取同一组的所有单选按钮
  const filterRadios = document.querySelectorAll('input[name="productFilter"]');
  
  // 定义你的筛选函数，接收选中的单选值作为参数
  function filterProducts(selectedValue) {
    console.log(`开始筛选，当前选中条件：${selectedValue}`);
    // 这里写你的实际筛选逻辑，比如：
    // 1. 获取商品列表元素
    // 2. 根据selectedValue显示/隐藏对应商品
    // 示例：
    // const products = document.querySelectorAll('.product-item');
    // products.forEach(product => {
    //   if (selectedValue === 'all' || product.dataset.category === selectedValue) {
    //     product.style.display = 'block';
    //   } else {
    //     product.style.display = 'none';
    //   }
    // });
  }

  // 给每个单选按钮绑定点击事件
  filterRadios.forEach(radio => {
    radio.addEventListener('click', function() {
      // 单选按钮点击后会自动选中，这里直接拿value就行
      filterProducts(this.value);
    });
  });
});

方案2：事件委托（适合动态生成单选按钮的场景） #

如果你的单选按钮是后来通过JS动态添加到页面的，用事件委托更靠谱，只需要给父容器绑定一次事件：

document.addEventListener('DOMContentLoaded', function() {
  // 获取单选组的父容器（就是包裹所有单选的那个div）
  const filterContainer = document.querySelector('.filter-group');
  
  // 同样定义筛选函数
  function filterProducts(selectedValue) {
    console.log(`开始筛选，当前选中条件：${selectedValue}`);
    // 你的筛选逻辑...
  }

  // 给父容器绑定点击事件，利用事件冒泡判断点击的元素
  filterContainer.addEventListener('click', function(e) {
    // 确认点击的是目标单选按钮
    if (e.target.tagName === 'INPUT' && e.target.type === 'radio' && e.target.name === 'productFilter') {
      filterProducts(e.target.value);
    }
  });
});

关键知识点提醒 #

• 单选按钮的value属性就是你要传给筛选函数的参数，提前设置好对应的值就行
• 用DOMContentLoaded包裹代码，确保页面元素加载完成后再执行JS，避免出现null错误
• 事件委托的好处是不用给每个元素单独绑事件，动态新增的单选按钮也能自动触发监听

这样你就能轻松实现动态获取选中值并执行筛选的功能啦，原生JS的写法其实很灵活，多试几次就能熟练掌握~

内容的提问来源于stack exchange，提问作者Георги Димитранов