如何实现点击td元素选中其内部的单选按钮（radiobutton）？

方法一：CSS实现（无JS，更简洁） #

利用label与单选按钮的关联特性，让label铺满整个TD区域，点击TD的任意位置都会触发label的点击事件，从而自动选中对应的单选按钮。

修改代码如下：

<td style="width: 17.5%; position: relative;">
    <input
        type="radio"
        :id="item.subValue"
        :name="item.fieldname"
    />
    <label 
        :for="item.subValue"
        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px;"
    >{{ item.subValue }}</label>
</td>

核心逻辑说明：

• 给td设置position: relative，作为label绝对定位的参考容器
• label设置绝对定位并将四个方向设为0，使其完全覆盖td的可点击区域
• 添加display: flex; align-items: center保证文字垂直居中，padding可根据需求调整，避免文字贴边

方法二：Vue事件绑定实现 #

通过给td绑定点击事件，手动触发单选按钮的选中状态，同时避免点击单选按钮或label时重复操作。

模板代码 #

<td style="width: 17.5%" @click="(e) => selectRadio(item, e)">
    <input
        type="radio"
        :id="item.subValue"
        :name="item.fieldname"
    />
    <label :for="item.subValue">{{ item.subValue }}</label>
</td>

方法实现 #

methods: {
    selectRadio(item, e) {
        const target = e.target;
        // 若点击的是单选按钮或label，直接返回，避免重复操作
        if (target.tagName === 'INPUT' || target.tagName === 'LABEL') {
            return;
        }
        // 获取对应单选按钮并设置选中状态
        const radio = document.getElementById(item.subValue);
        if (radio) {
            radio.checked = true;
        }
    }
}

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