如何用JavaScript获取点击的label内radio按钮的值（动态创建场景）

没问题，针对你这种动态创建Radio按钮的场景，我给你两个实用的解决方案：

方法1：修改onclick事件传入当前Label元素 #

直接在onclick里把当前的label元素传进test()函数，然后在函数里定位它内部的radio按钮就能拿到value了。

修改后的HTML代码：

<label class="btn btn-sm btn-white" onclick="test(this);"> 
  <input type="radio" value="abc" name="options"> this is a text 
</label> 
<label class="btn btn-sm btn-white" onclick="test(this);"> 
  <input type="radio" value="dfdf" name="options"> this is a text 
</label> 
<label class="btn btn-sm btn-white" onclick="test(this);"> 
  <input type="radio" value="reewr" name="options"> this is a text 
</label>

对应的JavaScript函数：

function test(labelElement) {
  // 找到label内部的radio按钮
  const radio = labelElement.querySelector('input[type="radio"]');
  // 弹出radio的value值
  alert(radio.value);
  // 手动标记radio为选中（默认点击label也会触发选中，这里做个保险）
  radio.checked = true;
}

方法2：事件委托（更适配动态生成元素） #

如果你的label是后续动态添加到页面的，用事件委托会更高效——不用给每个新生成的label都重复绑定事件。

首先去掉label上的onclick属性：

<label class="btn btn-sm btn-white"> 
  <input type="radio" value="abc" name="options"> this is a text 
</label> 
<label class="btn btn-sm btn-white"> 
  <input type="radio" value="dfdf" name="options"> this is a text 
</label> 
<label class="btn btn-sm btn-white"> 
  <input type="radio" value="reewr" name="options"> this is a text 
</label>

然后添加事件委托的JavaScript代码：

// 推荐绑定到这些label的父容器（这里用body做示例，实际可以用更精确的父元素）
document.body.addEventListener('click', function(e) {
  // 判断点击的目标是否是我们的目标label
  const targetLabel = e.target.closest('.btn.btn-sm.btn-white');
  if (targetLabel) {
    const radio = targetLabel.querySelector('input[type="radio"]');
    if (radio) {
      alert(radio.value);
      radio.checked = true;
    }
  }
});

为什么推荐事件委托？ #

• 动态生成的新label会自动触发事件，不需要额外处理
• 减少页面上的事件监听数量，性能更优

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