無法選擇單選按鈕

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

每行問題的<input>字段都使用相同的ID值。 在HTML中，該ID在頁面上必須唯一。

我認為瀏覽器很困惑，並認為既然已經設置了id =“ radio1”，即使它是一個不同的元素，也不必再次選擇它。

如果為所有輸入字段提供唯一的ID，問題將消失。