Question

我正在尝试使用下面的css为radion button添加样式，

     <script type="text/javascript" src=""></script>

<style media="screen" type="text/css">

.sizes input[type=radio] {
    display:none;
    margin:10px;
    cursor: pointer;
}

.sizes input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 2px;
    margin: 5px 5px 0 0;
    cursor: pointer;
    font-family: tahoma, arial;
    font-size: 0.9em;
}

.sizes input[type=radio]:checked + label {
  color: #be5559;
  cursor: pointer;
}

.sizes .checked {
  color: #be5559;
  cursor: pointer;
}

</style>  

<!--[if IE 8]>
 <script type="text/javascript">
  $(document).ready(function(){
   $(".sizes label").click(function() {
    $(".sizes label").removeClass("checked");
    $(this).addClass("checked");
   });
  });
 </script>
 <![endif]-->

</head>

但问题是如果点击First one第二个按钮也在Mozilla中被选中，而它在IE 8中有效。我创建了一个Fiddle

感谢任何帮助

Answer 1

您正在为标签指定错误的for属性。标签应具有与其定位的元素for相同的id属性值。

E.g。

<input type="radio" id="radio4" name="radio" value="true">
<label for="radio4">Un-Subscribe</label>

这里修改了jsFiddle：DEMO

一次选择一个单选按钮

1 个答案: