Wie verknüpfen Sie ausgefallene Optionsfelder mit derselben ID?

Question

Ich möchte diese funky radio buttons zu verwenden, obwohl die Radiotasten eine id = radio1 haben, id = radio2, id = radio3 etc

ich alle von ihnen möchte id-radio1 haben, so ist es das Ergebnis radio1 schreibt in die Datenbank:

Hier ist, wie ich normale Radio-Buttons arbeiten in der Vergangenheit mit der gleichen ID haben und sie wechseln zwischen einander:

 <div class="form-group col-md-12"> 
     <label class="control-label form-check-inline">Gender</label>* 
      <div class="form-group">  
        <input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label> 
        <input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label> 
      </div> 
     </div> 

$ Geschlecht = $ _ POST [ "Gender"];

INSERT INTO [dbo] [SubmissionsTBL] [Geschlecht] VALUES (' "trimText ($ Geschlecht).."')

Obwohl mit den flippigen Radiobuttons aus diesem chaning.

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio2"/> 
     <label for="radio2">Female</label> 
    </div> 

</div> 

auf das nicht funktioniert - es ist nicht erlaubt es mir Radio-Buttons zu wechseln:

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio" id="radio1"/> 
     <label for="radio2">Female</label> 
    </div> 

</div> 

Was die Togg stoppt le? Vielen Dank!

Answer 1

Ihr Code sollte in etwa so geändert werden. Die Optionsschaltfläche name ist, was an das Back-End gesendet wird, und die id wird für Front-End-Dinge wie Label-Zuordnung verwendet.

IDs sollten immer eindeutig sein.

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio1" /> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio2"/> 
     <label for="radio2">Female</label> 
    </div> 
</div> 

Wenn von Makeln, meinen Sie das normale Verhalten von Radiobuttons, dann, was geschieht, wenn die alle Optionsfelder in der Gruppe mit der gleichen name haben.

Answer 2

TL; DR: Aufgrund der id und name Attribut mit dem gleichen Wert in Ihrem ersten Beispiel, ich glaube, Sie können die beiden verwirren. Mit dem Datenbankkommunikationscode, den Sie aufstellen, ergreift es die name="Gender" und nicht die id="Gender".

Weitere Informationen über id und class obwohl Sie als Internet-Programmierer nützlich sein könnten:

Das id Attribut nur ein Element pro HTML-Dokument anwenden kann. Ich würde vorschlagen, das Attribut class stattdessen zu verwenden. Der Hauptunterschied zwischen und id und einem class ist, dass ein class auf mehrere Elemente angewendet werden kann.

Hier ist ein funktionierendes Lösung an den Code, den Sie zur Verfügung gestellt:

<div class="funkyradio"> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio1" class="radio_grp1"/> 
     <label for="radio1">Male</label> 
    </div> 
    <div class="funkyradio-primary col-md-6"> 
     <input type="radio" name="radio1" id="radio2" class="radio_grp1"/> 
     <label for="radio2">Female</label> 
    </div> 
</div> 

ich die Klasse verwendet .radio_grp1 wie der Name, so dass Sie wissen, dass Sie eher zu einer Gruppe von Radiobuttons sich beziehen als nur ein.

Außerdem, wenn Sie eine Bibliothek wie Bootstrap verwenden, ist es sehr üblich, dass ein Element bereits eine class zugewiesen hat. Um dieses Problem zu lösen, können Sie ein einzelnes Element mehrere Klassen zuordnen, indem Sie ein Leerzeichen in der Zeichenfolge das Hinzufügen nach dem class Attribut wie folgt:

<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/> 

Hoffnung war nützlich!