CSS：カスタムラジオボタンを無効にする

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をクリックすると、それがチェックになり、equal name他のすべてのradio-buttonsがオフになっ

これを試してみてください：

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); 
 
}

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

EDIT：

Radio buttonsがあります相互に排他的な2つ以上のオプションのリストがある場合に使用されますユーザはちょうど1つの選択肢を選択しなければならない。つまり、選択されていないラジオボタンをクリックすると、以前にリスト内で選択された他のボタンの選択が解除されます。

Checkboxesは、オプションのリストがある場合に使用され、ユーザは任意の数の選択肢（0,1または複数）を選択できます。つまり、各checkboxはリスト内の他のすべてのcheckboxesから独立しているため、1つのチェックボックスをオンにしても他のチェックボックスはオフになりません。

Answer 2

$(':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); 
} 
}); 

Answer 3

コードに問題はありません。

ラジオボタンを使用する場合は、他のラジオオプションに同じ名前を付けます。

チェックのために使用する]チェックボックスの

やラジオボタンのペアがあるだろうDIS-選択しないであろうすべてのラジオボタンの

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

Fiddle