Question

我在单选按钮上遇到这个奇怪的问题。我正在使用单选按钮的自定义样式（借助一些在线教程）。我无法选择几个选项。这是jsfiddle链接：http://jsfiddle.net/bm6Lfhdz/1/

尝试选择“是”＆＃39;从第二个问题或＆＃39;选项1＆＃39;从第五个问题。点击它们没有任何反应。任何人都可以指出我的代码有什么问题吗？

我使用的自定义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 =＆＃34; radio1＆＃34;已经设定好了，它不应该再次选择它，即使它是一个不同的元素。

如果您为所有输入字段指定唯一ID，问题就会消失。

无法选择单选按钮

1 个答案: