如何在Django中获取单选按钮值？提交无值问题排查

核心原因 #

单选按钮组只有被选中的选项才会被提交到后端，当前代码存在两个关键问题：

1. 没有默认选中的星级选项，若用户未选择任何星级就提交表单，rating字段不会出现在请求体中，导致后端request.POST.get('rating')返回None。
2. 可能存在CSS样式问题：很多星级评分实现会隐藏原生单选按钮，若标签与单选按钮的点击关联失效（比如CSS阻止事件传递），会出现点击星星但单选按钮实际未被选中的情况。

修复步骤 #

1. 验证标签与单选按钮的关联有效性 #

你的HTML中标签for属性与单选按钮id对应关系正确，但可以临时移除rating-area的CSS样式，直接显示原生单选按钮，测试点击后是否出现选中状态（浏览器中单选按钮会显示圆点），确认点击事件能正确触发单选按钮选中。

2. 添加默认选中项（可选但推荐） #

若允许默认评分，可设置一个默认选中的星级，比如默认选3星：

<div class="rating-area">
    <label for="star-5" title="Оценка «5»"></label> 
    <input type="radio" id="star-5" name="rating" value="5">
    <label for="star-4" title="Оценка «4»"></label>
    <input type="radio" id="star-4" name="rating" value="4">
    <label for="star-3" title="Оценка «3»"></label>  
    <input type="radio" id="star-3" name="rating" value="3" checked> <!-- 添加checked属性 -->
    <label for="star-2" title="Оценка «2»"></label>    
    <input type="radio" id="star-2" name="rating" value="2">
    <label for="star-1" title="Оценка «1»"></label>
    <input type="radio" id="star-1" name="rating" value="1">
</div>

3. 前端强制校验评分选择 #

若要求用户必须选择评分，添加JS验证阻止未选评分的表单提交：

document.getElementById('commentProductForm').addEventListener('submit', function(e) {
    const selectedRating = document.querySelector('input[name="rating"]:checked');
    if (!selectedRating) {
        e.preventDefault();
        alert('请选择产品评分');
    }
});

4. 后端兜底校验与数据入库 #

即使前端做了验证，后端也要添加校验逻辑，避免空值或无效值存入数据库，同时记得把评分字段存入Comment模型：

def add_comment(request):
    if request.method == 'POST':
        text = request.POST.get('comment_text', '').strip()
        product_id = request.POST.get('product_id')
        stars = request.POST.get('rating')

        # 新增评分有效性校验
        if not stars or not stars.isdigit() or int(stars) not in range(1,6):
            return JsonResponse({'success': False, 'message': '请选择有效的评分'})
        if not text:
            return JsonResponse({'success': False, 'message': '评论内容不能为空'})

        try:
            profile = Profile.objects.get(user=request.user)
            product = Product.objects.get(id=product_id)
            # 新增rating字段存入模型
            Comment.objects.create(text=text, author=profile, product=product, rating=int(stars))
            return JsonResponse({'success': True, 'text': text, 'author': profile.first_name, 'rating': stars})
        except (Profile.DoesNotExist, Product.DoesNotExist):
            return JsonResponse({'success': False, 'message': '数据不存在'})
    
    return JsonResponse({'success': False})

5. 检查CSS样式问题 #

如果你的rating-area用了隐藏原生单选按钮的CSS，确保标签点击能正确触发单选按钮，避免使用pointer-events: none属性阻止标签的点击事件：

.rating-area input {
    display: none; /* 隐藏原生按钮 */
}
.rating-area label {
    cursor: pointer; /* 确保标签可点击 */
    /* 其他星星样式 */
}
/* 选中后的星星样式示例 */
.rating-area input:checked ~ label {
    color: #ffc107;
}

内容的提问来源于stack exchange，提问作者Артём Шепталин