Django订单表单尺寸按钮点击异常问题：如何实现按钮全域可选中？

这个问题的核心是HTML结构冲突：你把Django自动生成的<label>和<input type="radio">嵌套在了<button>标签里，导致点击按钮空白区域时，并没有真正触发单选框的选中事件——看起来选中只是按钮的视觉反馈，实际单选框没被标记为选中，提交表单时就会失效。

下面是两种简单可行的解决方案，推荐第一种（原生表单行为，无需JS）：

方案一：用<label>替代<button>实现按钮样式（推荐） #

Django的RadioSelect渲染的每个选项都包含<label>和<input>，我们可以直接把<label>改成按钮样式，利用<label>的原生特性：点击<label>的任何区域都会触发关联的单选框选中。

修改HTML模板 #

{% for choice in order_form.size %}
    <label class="size-btn">
        {{ choice.tag }}  <!-- 渲染单选框input -->
        {{ choice.choice_label }}  <!-- 渲染尺寸文本（S/M/L等） -->
    </label>
{% endfor %}

添加CSS样式（模拟按钮外观） #

.size-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 6px;
    font-size: 14px;
    transition: all 0.2s;
}

/* 隐藏原生单选框，只保留label的按钮样式 */
.size-btn input[type="radio"] {
    display: none;
}

/* 选中时的按钮样式 */
.size-btn:has(input[type="radio"]:checked) {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

注：has()伪类需要现代浏览器支持（Chrome 101+、Firefox 121+），如果要兼容旧浏览器，可以用JS监听单选框的change事件来切换样式类。

方案二：保留<button>标签，用JS触发单选框选中 #

如果你一定要保留<button>标签，可以通过JavaScript让按钮点击时主动选中对应的单选框：

修改HTML模板 #

{% for choice in order_form.size %}
    <button type="button" class="size-btn" data-radio-id="{{ choice.id_for_label }}">
        {{ choice.choice_label }}
        {{ choice.tag }}  <!-- 把单选框隐藏起来 -->
    </button>
{% endfor %}

添加CSS样式 #

.size-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 6px;
    font-size: 14px;
}

/* 隐藏原生单选框 */
.size-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 选中状态的按钮样式 */
.size-btn.selected {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

添加JavaScript逻辑 #

// 初始化：给已选中的按钮添加样式
document.querySelectorAll('.size-btn').forEach(btn => {
    const radio = document.getElementById(btn.dataset.radioId);
    if (radio.checked) {
        btn.classList.add('selected');
    }
});

// 点击按钮时选中对应的单选框，并更新样式
document.querySelectorAll('.size-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const radio = document.getElementById(btn.dataset.radioId);
        radio.checked = true;
        
        // 移除其他按钮的选中样式
        document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('selected'));
        // 给当前按钮添加选中样式
        btn.classList.add('selected');
    });
});

为什么原来的结构会失效？
原来的代码把<label>嵌套在<button>里，点击按钮空白区域时，事件触发的是<button>而不是<label>，所以并没有触发单选框的选中状态——你看到的“选中”可能只是按钮的视觉变化，但实际表单控件没有被标记，提交时就会被重置。

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