单击自身时单选按钮不会取消选中

Question

我正在使用 Bootstrap 3，我有一个这样的单选按钮：

<input type="radio" name="attr_var" class="minimal">
Add To Attribute

用户可以正常点击勾选，但再次点击不会取消勾选。

基本上选中后，用户可以在重新单击时取消选中它，但这并不奏效。

那么如何解决这个问题？

Answer 1

如果您只想使用单个选项来选中或取消选中，请使用 复选框 而不是 单选按钮.

例如，

<input type="checkbox" name="attr_var" class="minimal"> Add To Attribute

Answer 2

单选按钮不同于复选框。用户可以在一组单选按钮之间更改选项，但无法取消选择。

您可以参考 this 答案以获得更好的解释 为什么无法取消选择 HTML “无线电”输入？

PS。这适用于 native HTML 单选按钮。为此，您仍然可以使用复选框，或使用 CSS 和 Javascript 创建您自己的按钮，它们的行为方式相同。

Answer 3

不能取消选中单选按钮，我认为您只需要一个可以选中或取消选中的复选框。

请在此处查找参考资料：https://getbootstrap.com/docs/5.0/forms/checks-radios/

<input type="checkbox" name="attr_var" class="minimal">
Add To Attribute

Answer 4

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

单击自身时单选按钮不会取消选中

Radio Button Does Not Unchecked When Clicking On Itself

html

css

twitter-bootstrap

twitter-bootstrap-3

adminlte