Javascript: Get selected radio and paste it on a label tag with jQuery

Question

I have a gender selection radio:

<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">      
    <label class="required">Sexo</label>                
    <input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
    <label for="userDto.gender0">Femenino</label>
    <input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
    <label for="userDto.gender1">Masculino</label>
</div>

Im trying to use a jquery script to get the selected radio and paste it inside of a label.

$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });

The problem is that Im using spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a "0" and "1" to the options. So I'm out of ideas about how to make the next html to get the value of the selected radio.

<div name="userLabelDiv" id="genderUserLabelDiv">
    <label class="required">Sexo</label> 
    <label id="genderLabel">Masculino</label> 
</div>

Could someone guide me through the problem? I cant find where is my error in the JS code. Thank you

Answer 1

The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.

$('input[name="userDto\\.gender"]').change( ... )