单击时未单选单选按钮

时间:2014-07-09 12:52:47

标签: html css

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

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

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

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

我尝试了各种方法,例如提供namevalue - 但没有解决问题。知道我们如何解决它吗?

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

5 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

所以,您尝试做的是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;
}

答案 2 :(得分:0)

您无法取消选择单选按钮。这是因为如果您希望用户选择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;

答案 3 :(得分:0)

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

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

      

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

    词源

      

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

答案 4 :(得分:-1)

一切都正确你只需要为所有单选按钮添加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">