HTML-Formular, wählen Sie nur ein Optionsfeld aus drei Radiogeräte

Question

In einem HTML-Formular haben wir drei Radio-Button-Sets für drei Klassen, zum Beispiel

Class 1 
<input id="Level1" name="Classl" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Classl" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Classl" type="radio" value="Level3" />Level 3<br> 
Class 2 
<input id="Level1" name="Class2" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Class2" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Class2" type="radio" value="Level3" />Level 3<br> 
Class 3 
<input id="Level1" name="Class3" type="radio" value="Level1" />Level 1<br> 
<input id="Level2" name="Class3" type="radio" value="Level2" />Level 2<br> 
<input id="Level3" name="Class3" type="radio" value="Level3" />Level 3<br> 
<input id="Level4" name="Class3" type="radio" value="Level4" />Level 4<br> 

Zu diesem Zeitpunkt kann der Benutzer wählen Sie eine aus jeder das Radioset. Wir wollen, dass sie nur EINEN Radiobutton auswählen, von allen. Es bedeutet, Benutzer kann nur eine Ebene aus drei Klassen auswählen.

Bitte schlagen Sie etwas vor, möglicherweise in Javascript/JQuery.

Answer 1

Try this;)

$(function(){ 
 
    $('input[type="radio"].classOnly').on('change', function(){ 
 
    $('input[type="radio"].classOnly:checked').not(this).attr('checked', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Class 1 
 
<input id="Level1" name="Classl" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Classl" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Classl" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
Class 2 
 
<input id="Level1" name="Class2" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Class2" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Class2" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
Class 3 
 
<input id="Level1" name="Class3" type="radio" class="classOnly" value="Level1" />Level 1<br> 
 
<input id="Level2" name="Class3" type="radio" class="classOnly" value="Level2" />Level 2<br> 
 
<input id="Level3" name="Class3" type="radio" class="classOnly" value="Level3" />Level 3<br> 
 
<input id="Level4" name="Class3" type="radio" class="classOnly" value="Level4" />Level 4<br>

Answer 2

Wir können nicht den gleichen Namen für alle von ihnen geben, wie wir die Klasse Auswahl zu

Dann wird die Klassenauswahl sollte Teil des Wertes sein verfolgen möchten.

<label> 
    <input id="Level1" name="Class" type="radio" value="Classl-Level1" /> 
    Level 1 
</label> 

Answer 3

Try this, Ich würde empfehlen, stattdessen nicht mit derselben ID mehrfach, Gebrauchsklasse.

$('.radioCollection').find('input:radio').on('click', function() { 
 

 
    $('.radioCollection').find('input:radio').not($(this)).attr('checked', false); 
 

 
    //you can remove below code 
 

 
    var mainId = $(this).closest('.radioCollection').attr('id'); // class1 || class2 || class3 
 

 
    var log = ''; 
 
    if ($(this).hasClass('Level1')) { 
 
    //Level1 
 
    log = 'Level1'; 
 

 
    } else if ($(this).hasClass('Level2')) { 
 
    //Level2 
 
    log = 'Level2'; 
 
    } else if ($(this).hasClass('Level3')) { 
 
    //Level3 
 
    log = 'Level3'; 
 
    } else if ($(this).hasClass('Level4')) { 
 
    //Level4 
 
    log = 'Level4'; 
 
    } 
 

 
    $('.tempLog') 
 
    .html('Selected Main Class: <span>' + mainId + '</span><br/> Selected Radio Class: <span>' + log + '</span>'); 
 
})

.tempLog { 
 
    padding: 10px; 
 
    background: #eee; 
 
    margin: 5px 0; 
 
    color: #888; 
 
} 
 
.tempLog span { 
 
    color: #000; 
 
    font-weight: 800; 
 
} 
 
input:radio { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tempLog"></div> 
 

 
Class 1 
 
<div id="class1" class="radioCollection"> 
 
    <input class="Level1" name="Classl" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Classl" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Classl" type="radio" value="Level3" />Level 3 
 
    <br> 
 
</div> 
 
Class 2 
 
<div id="class2" class="radioCollection"> 
 
    <input class="Level1" name="Class2" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Class2" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Class2" type="radio" value="Level3" />Level 3 
 
</div> 
 
<br>Class 3 
 

 
<div id="class3" class="radioCollection"> 
 
    <input class="Level1" name="Class3" type="radio" value="Level1" />Level 1 
 
    <br> 
 
    <input class="Level2" name="Class3" type="radio" value="Level2" />Level 2 
 
    <br> 
 
    <input class="Level3" name="Class3" type="radio" value="Level3" />Level 3 
 
    <br> 
 
    <input class="Level4" name="Class3" type="radio" value="Level4" />Level 4</div> 
 
<br>

this helps .. :)