Można to zrobić na kilka sposobów. Posiadanie kontenera wokół przycisków opcji jest bardzo zalecane, niezależnie od tego, ale możesz również umieścić klasę bezpośrednio na przyciskach. W tym HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
możesz wybrać według klasy:
$(".shapeButton").click(SetShape);
lub wybierz według identyfikatora kontenera:
$("#shapeList").click(SetShape);
W obu przypadkach zdarzenie zostanie wywołane po kliknięciu przycisku opcji lub jego etykiety, choć w tym drugim przypadku dziwnie (zaznaczenie przez „#shapeList”), kliknięcie etykiety spowoduje dwukrotne z jakiegoś powodu kliknięcie na najmniej w FireFox; wybór według klasy tego nie zrobi.
SetShape to funkcja, która wygląda następująco:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
}
W ten sposób możesz mieć etykiety na przyciskach i możesz mieć wiele list przycisków radiowych na tej samej stronie, które wykonują różne czynności. Możesz nawet ustawić każdy przycisk na tej samej liście, aby wykonywał różne rzeczy, ustawiając różne zachowanie w SetShape () na podstawie wartości przycisku.