提交表单后复选框无法取消选中的技术问题求助

核心问题1：复选框状态绑定的属性错误 #

你在<input>标签里用了check属性控制选中状态，但HTML复选框的选中状态是由**checked属性**控制的，且该属性需要绑定布尔值（true/false），而非字符串"checked"/"unchecked"。当前代码里的check={check ? "checked" : "unchecked"}完全无效，浏览器无法识别这个自定义的check属性，所以即使提交后调用setCheck(false)更新了状态，复选框的视觉状态也不会同步变化。

核心问题2：checkHandler逻辑局限（可选优化） #

当前checkHandler只能将状态设为true，如果需要支持手动取消选中，应该改为切换状态的逻辑；如果是强制只能选中的场景（比如单选需求），可以保留原逻辑，但这不是导致提交后不取消选中的直接原因。

修正后的关键代码 #

const [check, setCheck] = useState(false)

// 若需支持切换选中/取消，修改handler逻辑
const checkHandler = () => {
    setCheck(prev => !prev)
}

// 提交逻辑保持不变
onSubmit={(e) => {
  e.preventDefault()
  axios.post("http://localhost:8000", { check })
  .then((res) => {
    console.log(res.data)
    setCheck(false)
  })
}}

// 修正input的状态绑定属性
<label 
 htmlFor='checkbox_id' 
 id='label'
>
<input
  type="checkbox" 
  id="checkbox_id"
  checked={check} // 正确绑定checked属性与布尔状态值
  onChange={checkHandler}
/>                    
</label>

<button type="submit" value="submit" name="submit">submit</button>

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