Question

我将单选按钮排列在表格中

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

在Chrome中，可以选择单选按钮 - 但无法取消选择它们。 [我理解为标准行为]

在IE中，它根本不允许我选择单选按钮。 [在IE9中测试]。

我尝试了各种方法，例如提供name和value - 但没有解决问题。知道我们如何解决它吗？

<html>
<table id="tblValidContainers" border="0" cellpadding="0" cellspacing="0" style="width: 200px;
                    background-color: #E5DBE2; margin-left: 80px;">
                    <thead>
                        <tr>
                            <td class="Heading3" style="width: 120px;" align="center">
                                Container ID
                            </td>
                            <td class="Heading3" style="width: 80px;" align="center">
                                Receive
                            </td>
                        </tr>
                    </thead>
                    <tbody>
<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper" name="a" value = "a"> ~~3957515 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"  name="b" value = "c"> ~~3957514 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"> ~~3957513 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"> ~~3957512 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"> ~~3957511 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"> ~~3957510 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

<tr class="Normal">
    <td align="center" style="padding-left: 5px">
           <div class="divContainerIDWrapper"> ~~3957509 </div>
    </td>
    <td align="center" style="padding-left: 5px">
            <input type="radio" class="containerRadio">
    </td>
 </tr>

       </tbody>
  </table>
 </html>

Answer 1

单选按钮的名称来自旧式汽车收音机，您可以通过这些收音机实际按下一组按钮来更改电台。您一次只能收听一个电台，因此一次只能按一个单选按钮。

“input type =”radio“＆gt;定义了一个单选按钮。单选按钮让用户只能选择一个有限数量的选项”[见Radio Buttons]

Answer 2

所以，您尝试做的是checkbox，其外观和感觉是radio-button我错了吗？

如果是这样，page上的复选框4可能是您正在寻找的，使用不同的CSS。

而且，here是他所有复选框的完整演示。

我添加了一个可能的this other page示例。看看这个JSFiddle。

<强> 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>

<强> CSS

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;
}

Answer 3

您无法取消选择单选按钮。这是因为如果您希望用户选择option1或option2或option3但是禁止选择多个值或将其保留为空（例如，在选择性别的情况下），则会使用它们。见Specification at w3c：

当一个人切换＆＃34; on＆＃34;时，所有其他同名的人都会被切换＆＃34;关闭＆＃34;。

取消选择＆＃34;男性＆＃34;如果＆＃34;女性＆＃34;如果选中，则必须告诉浏览器无线电属于同一组。通过添加name-attribute：

来完成

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

如果您希望为用户提供可以随意检查/取消选中的方框（例如＆＃34;想要收到我们的简报？＆＃34;），您应该使用type =＆＃34;复选框＆＃34;

Answer 4

以下是我为解决此问题所做的工作。

为所有单选按钮添加了name属性
确保每个单选按钮的名称不同。 [由于我需要根据要求一次选择多个单选按钮 - 尽管"radio" button不打算这样做]

Wikipedia说：

单选按钮或选项按钮是一个图形控制元素，允许用户只选择一组预定义的选项，独占或。

词源

单选按钮以旧车载无线电上使用的物理按钮命名以选择预设电台 - 当按下其中一个按钮时，其他按钮会弹出，而按下的按钮则是“推入”位置的唯一按钮。

Answer 5

一切都正确你只需要为所有单选按钮添加name属性。所有这些都应该具有相同的name。

示例：

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

Radio按钮旨在提供一次只选择一个的功能。如果要选择多个，则必须使用checkbox。

示例：

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

单击时未单选单选按钮

5 个答案: