一次选择一个单选按钮

时间：2023-01-19 08:30:21

I am trying to add styles to the radion button with my css below,

我正在尝试使用下面的css为radion按钮添加样式,

     <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>

But the problem is if click on First one the second button is also getting selected in Mozilla , while it works in IE 8 . I have created a Fiddle

但问题是如果点击第一个,第二个按钮也在Mozilla中被选中,而它在IE 8中有效。我创造了一个小提琴

Any help is appreciated

任何帮助表示赞赏

1 个解决方案

#1

You are assigning wrong for attribute to label. Label should have same for attribute value as the id of element it is targeting.

您为属性赋予标签错误。标签的属性值应与其定位的元素的ID相同。

E.g.

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

Here is modified jsFiddle : DEMO

这里修改了jsFiddle:DEMO

#1