複数の選択を許可するHTMLラジオボタン

Question

私のHTMLフォームでは、次のフォーム<fieldset>が公開されているかどうかによってラジオボタンのセットが異なります。問題は何らかの理由でラジオボタンとしてではなくチェックボックスのように働いていることです。そのため、一度に選択するのではなく、すべてのオプションを選択できます。

これはどこのコードで間違っているのでしょうか？

<fieldset> 
     <legend>Please select one of the following</legend> 
     <input type="radio" name="track" id="track" value="track" /><label for="track">Track Submission</label><br /> 
     <input type="radio" name="event" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
     <input type="radio" name="message" id="message" value="message" /><label for="message">Message us</label><br /> 
    </fieldset> 

Answer 1

彼らは皆、同じname属性を持っている必要があります。

ラジオボタンは、name属性でグループ化されています。ここに例があります：

<fieldset> 
    <legend>Please select one of the following</legend> 
    <input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br /> 
    <input type="radio" name="action" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
    <input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br /> 
</fieldset> 

Answer 2

入力の名前は同じグループに属していなければなりません。次に、他のものがクリックされると自動的に選択解除されます。

Answer 3

ラジオボタンが正しく機能するため、彼の名前でグループ化する必要があります。 （例名= "タイプ"。）

<fieldset> 
    <legend>Please select one of the following</legend> 
    <input type="radio" name="type" id="track" value="track" /><label for="track">Track Submission</label><br /> 
    <input type="radio" name="type" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
    <input type="radio" name="type" id="message" value="message" /><label for="message">Message us</label><br /> 

それは、ラジオボタンの値をチェック返します（例を追跡|。イベント|メッセージ）

Answer 4

が形成するこの方法を試してみてください、それが

このjsfiddle

Button-Radio

を見てください...かなり凝っています3210

The idea is to choose a the radio as a button instead of the normal circle image. 

Answer 5

すべてのラジオボタンに同じ名前属性を追加する必要があります。私は過去にこのようにそれをやった

Answer 6

、JsFiddle：

CSS：

.radio-option { 
    cursor: pointer; 
    height: 23px; 
    width: 23px; 
    background: url(../images/checkbox2.png) no-repeat 0px 0px; 
} 

.radio-option.click { 
    background: url(../images/checkbox1.png) no-repeat 0px 0px; 
} 

HTML：

<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 

のjQuery：

<script> 
    $(document).ready(function() { 
     $('.radio-option').click(function() { 
      $(this).not(this).removeClass('click'); 
      $(this).toggleClass("click"); 
     }); 
    }); 
</script>