Problema al obtener valor de un grupo de botones

[0le0]

Saludos a todos!
Me estoy basando en un ejemplo de jquery ui(dialog modal-form para ser precisos)

Código:

http://jqueryui.com/demos/dialog/modal-form.html

con la diferencia que estoy usando datepicker y un grupo de botones de radio.

El problema es que al agregar un tercer elemento solo me muestra el valor de fecha y no el valor del radio seleccionado. Usando firebug veo que en el tercer intento pasa el elemento pero sin valores, es decir para la primera vez obtengo esto

Código:

[input#motivo1 1,input#motivo2 2,input#motivo3 3]

que a mi parecer le pasa los valores aunque ninguno este seleccionado.Eso es el nombre y valor de los botones de radio, pero la segunda vez que lo hago solo obtengo el nombre sin sus valores.
Como puedo pasar el valor que he seleccionado??

Aquí mi código:

Código HTML:

<div class="demo">

<div id="dialog" title="Create new user">
	<p id="validateTips">Seleccione cada una de las opciones.</p>

	<form>
	<fieldset>
	    <label for="fecha"><strong>Fecha</strong></label>
		<input type="text" name="datepicker" id="datepicker" class="text ui-widget-content ui-corner-all" />
		<label for="Motivo"><strong>Motivo</strong></label><br /><div id="areaMotivo">
        <input type="radio" name="motivo" id="motivo1" style="float:left" value="1" />Vacaci&oacute;n
        <br /><br /><input type="radio" name="motivo" id="motivo2" style="float:left" value="2">D&iacute;a feriado
        <br  /><br  /><input type="radio" name="motivo" id="motivo3" style="float:left"  value="3"/>Contingencia<br />
        </div>
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">

		<h1>Existing Users:</h1>


	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Fecha</th>
                <th>Motivo</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>12-10-2010</td>
				<td>[email protected]</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Agregar d&iacute;a</button>

</div><!-- End demo -->

<div class="demo-description">

<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>

</div><!-- End demo-description --> 

Código Javascript:

<script type="text/javascript">
 
    $(function() {
        var zz = $("input[type='radio']:checked").val();
        var fecha = $("#datepicker"),
            motivo = $("input[type='radio']"), //aqui es donde la primera vez tengo los valores, pero a la siguiente no trae valores
            allFields = $([]).add(fecha).add(motivo),
            tips = $("#validateTips");
 
        function updateTips(t) {
            tips.text(t).effect("highlight",{},1500);
        }
 
        function checkLength(o,n,min,max) {
 
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass('ui-state-error');
                updateTips("Debe seleccionar una fecha.");
                return false;
            } else {
                return true;
            }
 
        }
        
        function opcionSel(o,n, valor) {
        var xxx = valor;
            var sel = $('#motivo').val();
             valor = sel.val();
            if( $("input[type='radio']:checked").length == 0){
            
            $("#areaMotivo").addClass('ui-state-error');
                updateTips("Debe seleccionar un motivo.");
            return false;
            }
            else{
            return true;
            }
            
            
            
}
            
function checkRegexp(o,regexp,n) {
 
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass('ui-state-error');
                updateTips(n);
                return false;
            } else {
                return true;
            }
 
        }
        
        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {
                'Agregar día': function() {
                    var bValid = true;
                    allFields.removeClass('ui-state-error');
 
                    bValid = bValid && checkLength(fecha,"fecha",10,10);
                    bValid = bValid && opcionSel(motivo,"motivo", motivo.val());
                    
                    //bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
                    
                    if (bValid) {
                        $('#users tbody').append('<tr>' +
                            '<td>' + fecha.val() + '</td>' + 
                            '<td>' + $("input[type='radio']:checked").val() + '</td>' + 
                            '</tr>'); 
                        $(this).dialog('close');
                    }
                },
                Cancelar: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                allFields.val('').removeClass('ui-state-error');
            }
        });
        
        
        
        $('#create-user').click(function() {
            $('#dialog').dialog('open');
        })
        .hover(
            function(){ 
                $(this).addClass("ui-state-hover"); 
            },
            function(){ 
                $(this).removeClass("ui-state-hover"); 
            }
        ).mousedown(function(){
            $(this).addClass("ui-state-active"); 
        })
        .mouseup(function(){
                $(this).removeClass("ui-state-active");
        });
 
 
    
    $(function() {
        $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd'});
    });
    
    });
    </script>
 

Alguien sabe que esta ocurriendo??
Ayuda por favor......