Question

我正在尝试设置我的单选按钮，但由于某种原因它无法正常工作。如果我点击一个单选按钮然后它可以工作但问题出现的是当我点击另一个单选按钮。发生的事情是我点击的第一个保持选中状态，我点击的第二个点也会被检查，而不是第一个未经检查。

我的HTML

<li>
<label>* Title</label>
<div class="registration_title">
    <input id="mr" type="radio" name="title[mr]" value="Mr">
    <label for="mr"><span></span>Mr.</label>
    <input id="mrs" type="radio" name="title[mrs]" value="Mrs">
    <label for="mrs"><span></span>Mrs.</label>
</div>

我的css

input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}

这是一个jsfiddle：JSFIDDLE

Answer 1

单选按钮中的名称应相同.. 试试这个..

<div class="registration_title">
    <input id="mr" type="radio" name="title" value="Mr">
    <label for="mr"><span></span>Mr.</label>
    <input id="mrs" type="radio" name="title" value="Mrs">
    <label for="mrs"><span></span>Mrs.</label>
</div>

这是FIDDLE

请参阅THIS以了解单选按钮

Answer 2

尝试使用名称作为常用于您使用的单选按钮：

<强> HTML：

name="title[mr]"

<强> Demo

造型单选按钮不起作用

2 个答案: