如何通过Vanilla JS实现点击HTML按钮选中对应单选按钮？

报错原因 #

document.getElementsByClassName("btn-abo-one") 返回的是HTMLCollection（类数组对象），并非单个DOM元素，而addEventListener是单个DOM元素的专属方法，直接调用就会触发is not a function错误。

同时你的HTML代码存在语法错误：所有button标签的class属性写法有误，多了一个前引号，正确写法应为 <button class="btn btn-lg"> 而非 <button "class="btn btn-lg">，该错误会导致按钮样式失效，也可能干扰元素选择逻辑。

修正方案 #

第一步：修复HTML语法错误 #

修正所有button标签的属性写法：

<div class="col-11 d-block btn-abo-one">
   <button class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-two">
   <button class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-three">
   <button class="btn btn-lg">Hier klicken</button>
</div>

<div class="col-11 d-block btn-abo-four">
   <button class="btn btn-lg">Hier klicken</button>
</div>

<div class="abowrapper">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#1" class="custom-control-input" value="ABO#1">
        <label class="custom-control-label" for="ABO#1">Abo 1</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#2" class="custom-control-input" value="ABO#2">
        <label class="custom-control-label" for="ABO#2">Abo 2</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#3" class="custom-control-input" value="ABO#3">
        <label class="custom-control-label" for="ABO#3">Abo 3</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="RADIO" id="ABO#4" class="custom-control-input" value="ABO#4">
        <label class="custom-control-label" for="ABO#4">Abo 4</label>
      </div>
    </div>
  </div>
</div>

第二步：修复JS代码（两种可选方式） #

方式1：单个元素绑定事件

用document.querySelector直接获取单个目标元素（每个btn-abo-*类仅对应一个元素）：

// 绑定第一个按钮
const btnAboOne = document.querySelector(".btn-abo-one");
btnAboOne.addEventListener('click', function () {
  document.getElementById("ABO#1").checked = true;
});

// 绑定第二个按钮
const btnAboTwo = document.querySelector(".btn-abo-two");
btnAboTwo.addEventListener('click', function () {
  document.getElementById("ABO#2").checked = true;
});

// 绑定第三个按钮
const btnAboThree = document.querySelector(".btn-abo-three");
btnAboThree.addEventListener('click', function () {
  document.getElementById("ABO#3").checked = true;
});

// 绑定第四个按钮
const btnAboFour = document.querySelector(".btn-abo-four");
btnAboFour.addEventListener('click', function () {
  document.getElementById("ABO#4").checked = true;
});

方式2：事件委托（高效适配多元素）

若按钮和单选框数量较多，推荐使用事件委托，仅给父元素绑定一次事件即可：

// 可替换为按钮所在的具体父容器，缩小事件监听范围
document.body.addEventListener('click', function (e) {
  // 匹配点击元素所在的按钮容器
  const btnContainer = e.target.closest('.btn-abo-one, .btn-abo-two, .btn-abo-three, .btn-abo-four');
  if (!btnContainer) return;

  // 根据容器类名匹配对应单选框ID
  let radioId;
  if (btnContainer.classList.contains('btn-abo-one')) {
    radioId = 'ABO#1';
  } else if (btnContainer.classList.contains('btn-abo-two')) {
    radioId = 'ABO#2';
  } else if (btnContainer.classList.contains('btn-abo-three')) {
    radioId = 'ABO#3';
  } else if (btnContainer.classList.contains('btn-abo-four')) {
    radioId = 'ABO#4';
  }

  if (radioId) {
    document.getElementById(radioId).checked = true;
  }
});

额外优化建议 #

给按钮容器添加自定义属性，直接关联对应单选框ID，让代码更简洁：
修改HTML按钮容器：

<div class="col-11 d-block btn-abo" data-radio-id="ABO#1">
   <button class="btn btn-lg">Hier klicken</button>
</div>
<div class="col-11 d-block btn-abo" data-radio-id="ABO#2">
   <button class="btn btn-lg">Hier klicken</button>
</div>
<div class="col-11 d-block btn-abo" data-radio-id="ABO#3">
   <button class="btn btn-lg">Hier klicken</button>
</div>
<div class="col-11 d-block btn-abo" data-radio-id="ABO#4">
   <button class="btn btn-lg">Hier klicken</button>
</div>

简化后的JS事件委托代码：

document.body.addEventListener('click', function (e) {
  const btnContainer = e.target.closest('.btn-abo');
  if (btnContainer) {
    const radioId = btnContainer.dataset.radioId;
    document.getElementById(radioId).checked = true;
  }
});

内容的提问来源于stack exchange，提问作者Crysanthes