Benutzerfreundliche Radio-Tasten klicken Erkennung

Question

Ich mache ein Formular mit Radio-Taste unter anderem, wo eine Update-Funktion aufgerufen wird, wenn der Benutzer etwas ändern.

Allerdings habe ich ein Problem mit der Kombination dieser benutzerfreundlichen Optionsfelder, wo ich eine Schaltfläche um Text und die Schaltfläche, um es einfacher zu klicken möchten.

Ich habe Probleme mit der Erkennung des Klicks auf die Zone, den Text und die Schaltfläche zur gleichen Zeit. - Bisher habe ich es nur geschafft, indem ich die MouseEvent.target mit einer Liste von id (die ich jedem einzelnen Element geben muss) vergleiche, was in meinem Kopf einfach falsch klingt.

<div class="buttonZone"> 
    <input type="radio" id="choice1" /> 
    <label for="choice1">Choice 1</label> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" /> 
    <label for="choice2">Choice 2</label> 
</div> 

Alle Ideen würden sehr geschätzt werden.

Answer 1

Sie können den Eingabe- und Beschriftungstext in ein label-Tag einfügen (im Gegensatz zu separaten Elementen, die mit dem Attribut for verknüpft sind), und der gesamte Bereich löst die Eingabe aus.

.buttonZone { 
 
    background: #eee; 
 
    border: 1px solid #aaa; 
 
    padding: 2em; 
 
    display: inline-block; 
 
}

<label class="buttonZone"> 
 
    <input type="radio" id="choice1" /> 
 
    <span>Choice 1</span> 
 
</label> 
 
<label class="buttonZone"> 
 
    <input type="radio" id="choice2" /> 
 
    <span>Choice 2</span> 
 
</label>

Answer 2

Haben Sie versucht, Werte zu den Tasten zu geben?

<div class="buttonZone"> 
    <input type="radio" id="choice1" value="Choice 1" /> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" value="Choice 2" /> 
</div>