Klicken Sie auf das Label macht Klicken auf Radiobutton

Question

Ich möchte das: wenn der Benutzer auf das Radiobutton-Label klicken, wird es automatisch auf den Radio-Button selbst klicken. Wenn der Benutzer gerade auf das Etikett direkt nach dem Radiobutton klickt, passiert nichts, was den Benutzer dazu zwingt, auf den winzigen Radiobutton selbst zu klicken.

Einige Leute haben vorgeschlagen, das Attribut 'for' auf dem Etikett zu verwenden, aber um dies zu tun, muss ich die 'id' der zweiten Option ändern; Auf diese Weise wird das Formular beide Optionen als aktiviert markieren, so dass es in meinem Fall nicht funktioniert. Hier

https://jsfiddle.net/j4qzh544/2/

ist die html:

<form href="#"> 
<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label class="radio-label">Option one</label> 
    <input type="radio" id="option1" name="option1" data-label="Option two" value="2"><label class="radio-label">Option two</label> 
    <input type="submit"/> 
</form> 

Um dies zu erreichen, ich versuche, Jquery zu verwenden, um eine Click-Methode auf jedes Etikett mit der Klasse 'radio-label' zu schaffen, so dass ein Klick auf den Radiobutton. Etwas wie der Code unten, aber es funktioniert nicht:

Answer 1

Eigentlich benötigen Sie keine js oder jQuery-Code. Fügen Sie einfach for Attribut innerhalb der label. Geben Sie als Wert den Wert id des angegebenen Optionsfelds an.

<input type="radio" id="option1" name="option1" data-label="Option one" value="1" /><label class="radio-label" for='option1'>Option one</label> 
 
<input type="radio" id="option2" name="option1" data-label="Option two" value="2" /><label class="radio-label" for='option2'>Option two</label>

Answer 2

Verwenden for Attribut <label>.

Die ID eines bewertbaren Formularelements im selben Dokument wie das Labelelement. Das erste derartige Element im Dokument mit einer ID, die dem Wert des Attributs for entspricht, ist das beschriftete Steuerelement für dieses Labelelement.

<label for="option2" class="radio-label">Option two</label> 

<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label for="option1" class="radio-label">Option one</label> 
 
<input type="radio" id="option2" name="option1" data-label="Option two" value="2"><label for="option2" class="radio-label">Option two</label>

Answer 3

Sie können die input Tag innerhalb der label Tag wickeln. Genau wie folgt aus:

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one 
</label> 
<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label> 

Answer 4

sollten Sie label for verwenden.

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label> 
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label> 

Solution (keine js erforderlich)

Answer 5

Setzen Sie den Input-Tag innerhalb des Etiketts Das ist, genug

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one</label> 
 
    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

Answer 6

Sie brauchen nicht alle js hierfür einfach diese verwenden

<label for="option2" class="radio-label">Option two</label> 

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label> 
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>