無法選擇單選按鈕

Question

我遇到單選按鈕這個奇怪的問題。我使用單選按鈕的自定義樣式（藉助一些在線教程）。我無法選擇幾個選項。這裏是的jsfiddle鏈接：http://jsfiddle.net/bm6Lfhdz/1/

嘗試從第二個問題或第五個問題「選項1」選擇「是」。當你點擊它們時沒有任何反應。任何人都可以指出我的代碼有什麼問題嗎？我使用

自定義CSS：

div.questions { 
margin-bottom: 12px; 
border: 1px dotted #fafafa; 
padding: 25px 20px; 
position: relative; 
margin-bottom: 20px; 
} 

input[type='radio'] { 
display: none; 
cursor: pointer; 
} 
input[type='radio']:focus, input[type='radio']:active{ 
    outline: none; 
} 
input[type='radio']:hover + label:hover { 
    color: #fff; 
} 
input[type='radio'] + label { 
cursor: pointer; 
display: inline-block; 
position: relative; 
padding-left: 25px; 
    margin-right: 10px; 
color: #0b4c6a; 
} 
input[type='radio'] + label:before, input[type='radio'] + label:after{ 
content: ''; 
font-family: helvetica; 
display: inline-block; 
width: 18px; 
height: 18px; 
left: 0; 
bottom: 0; 
text-align: center; 
position: absolute; 
} 
input[type='radio'] + label:before { 
background-color: #fafafa; 
-moz-transition: all 0.05s ease-in-out; 
-o-transition: all 0.05s ease-in-out; 
-webkit-transition: all 0.05s ease-in-out; 
transition: all 0.05s ease-in-out; 
} 
input[type='radio'] + label:after { 
color: #fff; 
} 
input[type='radio']:checked + label:before { 
-moz-box-shadow: inset 0 0 0 10px #4DD26D; 
-webkit-box-shadow: inset 0 0 0 10px #4DD26D; 
box-shadow: inset 0 0 0 10px #4DD26D; 
} 

/*Radio Specific styles*/ 
input[type='radio'] + label:before { 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 
} 
input[type='radio'] + label:hover:after, input[type='radio']:checked + label:after { 
content: "\2713"; 
line-height: 18px; 
font-size: 14px; 
} 
} 
input[type='radio'] + label:hover:after { 
    color: #c7c7c7; 
} 
input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after { 
color: #fff; 
} 

由於提前，

注：請測試所有的選項。因爲我看到了單選按鈕的一些隨機行爲。

Answer 1

的問題，每一行使用相同的ID值，其<input>領域。在HTML中，該ID在頁面上必須是唯一的。

我猜的瀏覽器是迷茫，認爲既然ID =「收音機1」已經被設置，它不應該再次選擇它，即使它是一個不同的元素。

如果你給所有的輸入字段一個唯一的ID，問題就會消失。