使用htmx时如何正确获取单选按钮组的选中值？

问题出在你的单选按钮没有设置value属性——HTML中单选按钮如果不指定value，提交时默认会发送on作为值，后端自然无法区分选中项。另外你的第二个label的for属性存在拼写错误（JsNetutral应为JsNeutral），会导致点击label无法选中对应单选框，需要一并修正。

修改步骤： #

• 给每个单选按钮添加value属性，设置与选项对应的唯一值（方便后端识别）
• 修正label的for属性拼写错误

修改后的完整代码： #

<div id="js-scale">
    <div>
        <input type="radio" name="Js" id="JsStrong" value="agree">
        <label for="JsStrong">Agree</label>
    </div>
    <div>
        <input type="radio" name="Js" id="JsNeutral" value="neutral">
        <label for="JsNeutral">Neutral</label>    
    </div>
    <div>
        <input type="radio" name="Js" id="JsPos" value="disagree">
        <label for="JsPos">Disagree</label>    
    </div>
    <div id="control-block">
        <button hx-post="{{'/session/'+session+'/tweet/'+tweet+'/Skip'}}" hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button">Skip</button>
        <button hx-post="{{'/session/'+session+'/tweet/'+tweet+'/js_submit'}}" hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button" hx-include="[name='Js']">Submit</button>
    </div>
</div>

后端获取方式： #

修改后，点击Submit按钮提交时，Python后端可以通过request.form.get('Js')获取到选中的具体值（如agree、neutral或disagree），以此区分用户选择的选项。

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