Ik heb 3 radio buttons in mijn webpagina, zoals hieronder:
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>
In jQuery, ik wil de waarde van de geselecteerde radio-knop te krijgen wanneer een van deze drie worden geklikt. In jQuery hebben we id (#) en class (.) selectors, maar wat als ik een keuzerondje wil vinden bij de naam, zoals hieronder?
$("<radiobutton name attribute>").click(function(){});
Kunt u mij vertellen hoe dit probleem op te lossen.
Dit zou het moeten doen, dit staat allemaal in de documentatie, die een voorbeeld heeft dat hier erg op lijkt:
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
Ik moet ook opmerken dat je meerdere identieke ID's in dat knipsel hebt. Dit is ongeldige HTML. Gebruik klassen om elementen te groeperen, geen ID's, want die moeten uniek zijn.
Om te bepalen welk keuzerondje is aangevinkt, probeer dit:
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
De gebeurtenis zal worden opgevangen voor alle keuzerondjes in de groep en de waarde van het geselecteerde knopje zal in val worden geplaatst.
Update: Na het posten heb ik besloten dat Paolo's antwoord hierboven beter is, omdat het een DOM traversal minder gebruikt. Ik laat dit antwoord staan omdat het laat zien hoe je het geselecteerde element krijgt op een manier die cross-browser compatibel is.
Zoiets als dit misschien?
$("input:radio[name=theme]").click(function() {
...
});
Als je op een keuzerondje klikt, zal het geselecteerd worden, dus dit zal worden opgeroepen voor het geselecteerde keuzerondje.