HTML-Radio-Tasten ermöglichen mehrere Auswahlen

Question

In meinem HTML-Formular habe ich die unten als eine Reihe von Optionsfeldern, je nachdem, welche Optionsfeld Sie wählen, hängt davon ab, was das nächste Formular <fieldset> offenbart, das alles funktioniert. Das Problem ist, dass sie aus irgendeinem Grund wie ein Kontrollkästchen funktionieren und nicht als Optionsfeld. Sie können also alle Optionen auswählen und nicht nur die eine gleichzeitig.

Kann jemand sehen, wo das in dem folgenden Code falsch geht?

<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

Sie brauchen alle gleichename Attribut haben.

Die Optionsfelder sind nach dem Attribut name gruppiert. Hier ein Beispiel:

<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

Der Name der Eingänge muss derselbe sein, um zur selben Gruppe zu gehören. Dann werden die anderen automatisch abgewählt, wenn auf einen geklickt wird.

Answer 3

Um die Radio-Tasten richtig funktioniert, müssen Sie nach seinem Namen gruppiert haben. (Bsp. Name = "Typ")

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

Es wird gibt den Wert des Optionsfelds geprüft (Ex verfolgen |. Ereignis | Nachricht)

Answer 4

Versuchen Sie, diese Art und Weise der Bildung, es Werfen Sie einen Blick eher Phantasie ...

an diesem jsfiddle

Button-Radio

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

Answer 5

Alle Optionsfelder müssen das gleiche Namensattribut haben.

Answer 6

Ich habe es auf diese Weise in der Vergangenheit getan, 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>