Html 单击时未选择单选按钮

我把单选按钮排列在一张桌子上

<input type="radio" class="containerRadio">

---

一切都是正确的，您只需向所有单选按钮添加

name

属性。它们都应该有相同的

名称

例如：

 <input type="radio" name="one" class="containerRadio">
 <input type="radio" name="one" class="containerRadio">

 <input type="checkbox" name="two" class="containercheckbox">
 <input type="checkbox" name="two" class="containercheckbox">

---

不能取消选择单选按钮。这是因为如果您希望用户选择选项1、选项2或选项3，但禁止选择多个值或将其留空（例如，在选择性别的情况下），则会使用这些值。 见：

当一个开关处于“开启”状态时，具有相同名称的所有其他开关处于“关闭”状态

如果选择了“女性”，要取消选择“男性”，您必须告诉浏览器收音机属于同一组。这是通过添加name属性完成的：

<input checked type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">

---

如果您希望给用户提供他可以随意选中/取消选中的框（例如“想接收我们的新闻稿吗？”），您应该使用type=“checkbox”。

单选按钮从老式车载收音机中获取名称，您可以在其中按一组按钮中的一个来更改电台。一次只能收听一个电台，因此一次只能按下一个单选按钮

---

“input type=”radio“>定义了单选按钮。单选按钮让用户只选择有限数量的选项中的一个“[请参见]

因此，您试图做的是一个具有

单选按钮外观的
复选框，我错了吗

如果是这样的话，这个复选框中的第四个可能就是您想要的，使用不同的CSS

这是他制作的所有复选框的全部演示

我添加了我发现的一个可能的示例。看看这个

HTML

    <h3>CSS3 Custom Checkbox</h3>
    <div class="checkbox">
        <input type="checkbox" value="check1" name="check" id="check1">
        <label for="check1">Checkbox No. 1</label>
        <br>
        <input type="checkbox" value="check2" name="check" id="check2">
        <label for="check2">Checkbox No. 2</label>
    </div>

下面是我为解决这个问题所做的

在所有单选按钮中添加了
name
属性
确保每个单选按钮的名称不同。[因为我需要根据需要一次选择多个单选按钮-尽管
“单选”按钮的目的不是这样做]

说：

单选按钮或选项按钮是一种图形控制元素，允许用户仅选择预定义选项集中的一个，即独占或

词源学

单选按钮是以旧款车载收音机上用于选择预设电台的物理按钮命名的——当按下其中一个按钮时，其他按钮会弹出，只剩下按下的按钮处于“按下”位置

您不能“取消选择”单选按钮。如果你想要这个功能，你需要一个复选框。@War10ck谢谢。我用上面的代码片段更新了我创建的问题，它在Chrome和IE9+中运行良好。根据小提琴，你能解释一下你希望它做什么或不做什么吗？…对不起，它不应该在一个单选按钮中吗？单选按钮一次只能提供一个功能。如果要选择多个，必须使用
复选框
仅使用
“单选按钮定义单选按钮。单选按钮允许用户仅选择有限数量的选项中的一个”
    <h3>CSS3 Custom Checkbox</h3>
    <div class="checkbox">
        <input type="checkbox" value="check1" name="check" id="check1">
        <label for="check1">Checkbox No. 1</label>
        <br>
        <input type="checkbox" value="check2" name="check" id="check2">
        <label for="check2">Checkbox No. 2</label>
    </div>

label {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin-right: 15px;
    padding-left: 25px;
    position: relative;
}
.wrapper {
    margin: 50px auto;
    width: 500px;
}
input[type="radio"], input[type="checkbox"] {
    display: none;
}
label:before {
    background-color: #aaa;
    bottom: 1px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
    content: "";
    display: inline-block;
    height: 16px;
    left: 0;
    margin-right: 10px;
    position: absolute;
    width: 16px;
}
.checkbox label:before {
    border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
    color: #f3f3f3;
    content: "•";
    font-size: 30px;
    line-height: 18px;
    text-align: center;
}