Question

我使用css创建了一个自定义单选按钮。但我有一个问题。实际上，当选择单选按钮时，它被选中。但我无法取消选择它。为了创建自定义单选按钮，我创建了这样的CSS。

input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 1px;
left: 0px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgb(255,196,0);
}

和自定义单选按钮的HTML代码就是这样..

<div style="width:93%;height: 39px;">   
    <div style="padding-top: 10px;width: 70%;height: 32px"><input type="radio" style="width: 15px;height: 16px"/>Wednesday</div>
</div>

请帮我解决这个问题。任何帮助将不胜感激。

Answer 1

您必须提供具有相同radio button属性的其他name。当用户点击radio-button时，系统会进行检查，所有其他radio-buttons equal name都会取消选中

试试这个：

＆＃13;

input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 1px;
left: 0px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgb(255,196,0);
}

＆＃13;

<div style="width:93%;height: 39px;">   
    <div style="padding-top: 10px;width: 70%;height: 32px">
      <input type="radio" name="day" style="width: 15px;height: 16px"/>Wednesday
      <input type="radio" name="day" style="width: 15px;height: 16px"/>Thursday
  </div>
</div>

＆＃13;

修改

如果存在两个或多个互斥选项的列表，并且用户必须选择一个选项，则使用
Radio buttons。换句话说，单击未选中的单选按钮将取消选择先前在列表中选择的其他按钮。
当有选项列表时，使用
Checkboxes，用户可以选择任意数量的选项，包括零，一或几个。换句话说，每个checkbox都独立于列表中的所有其他checkboxes，因此选中一个框并不会取消选中其他{/ p>。

Answer 2

代码没有问题。

如果你想要一个单选按钮，那么只需将另一个无线电选项命名为。

使用复选框选中并取消选中

<input type="checkbox" style="width: 15px;height: 16px"/>

Fiddle

Answer 3

$(':radio').mousedown(function(e){
 var $self = $(this);
 if( $self.is(':checked') ){
 var uncheck = function(){
 setTimeout(function(){$self.removeAttr('checked');},0);
 };
 var unbind = function(){
 $self.unbind('mouseup',up);
 };
 var up = function(){
  uncheck();
  unbind();
 };
 $self.bind('mouseup',up);
    $self.one('mouseout', unbind);
 }
 });

CSS：禁用自定义单选按钮

3 个答案: