Korrekter Weg HTML-Radiobutton zu verwenden?

Question

Ich habe 3 Radiobuttons. Ich möchte, dass sie sich wie Radiobuttons verhalten: Wenn der Benutzer auf einen klickt, kann der andere nicht angeklickt werden. Aber irgendwie funktionieren meine Knöpfe wie Kästchen, der Benutzer kann alle 3 auswählen. Hier ist mein Code, was fehlt mir? Vielen Dank !

<div class="form-group"> 
<div class="form-item" id="form-item-hi_status1"> 
<label for="input-status1" ></label> 
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1"> 
<label class="radio-label">Option 1</label> 
</div> 
<div class="form-item" id="form-item-hi_status2"> 
<label for="input-status2" ></label> 
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2"> 
<label class="radio-label">Option 2</label></div> 
<div class="form-item" id="form-item-hi_status3"> 
<label for="input-status3" ></label> 
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label> 
</div> 

Hier ist ein Bild, das das Problem zeigt. Ich benutze keine W3Schools als Lernressource, ich habe nur ihren HTML-Editor verwendet, um das Beispiel zu zeigen.

Answer 1

Alle Optionsfelder in einer Gruppe müssen denselben Wert für das Attribut name haben. Das macht sie gegenseitig ausschließend.

Hier the documentation für <input type='radio'> beinhaltet:

Die „Name“ -Einstellung ein wichtiges Attribut von Radiobuttons ist, wie es identifiziert, welche Gruppe ein Optionsfeld gehört. Da Gruppen von Optionsschaltflächen als eine Einheit fungieren, müssen Sie einen allgemeinen Namen für alle zugehörigen Optionsfelder angeben. Wenn zwei oder mehr Optionsfelder einen gemeinsamen Namen haben, hebt die Auswahl einer der Schaltflächen alle anderen auf, die den gleichen Namen haben, . Wenn Sie auf einer Einzelseite mehr als eine Gruppe von Optionsfeldern haben, müssen die Schaltflächen in verschiedenen Gruppen unterschiedliche " " -Namensattribute haben.

Answer 2

Optionsfelder werden mit dem Attribut name gruppiert. geben Sie ihnen die gleiche name.

<div class="form-group"> 
<div class="form-item" id="form-item-hi_status1"> 
    <label for="input-status1" ></label> 
    <input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1"> 
    <label class="radio-label">Option 1</label> 
</div> 
<div class="form-item" id="form-item-hi_status2"> 
    <label for="input-status2" ></label> 
    <input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2"> 
    <label class="radio-label">Option 2</label> 
</div> 
<div class="form-item" id="form-item-hi_status3"> 
    <label for="input-status3" ></label> 
    <input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3"> 
    <label class="radio-label">Option 3</label> 
</div>