为什么我用jquery的demao做修改后，无法通过name获取属性值


<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain {  width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }


</style>
<script type="text/javascript">
$(function() {

var name = $("input[@name=f][@checked=checked]"), //我把这修改了，本来是text，但是我想修改为radio，然后获取值输出,可是我发现后面name为null
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $("#validateTips");
   
function updateTips(t) {
tips.text(t).effect("highlight",{},1500);
}

$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Create an account': function() {
if(name == null)alert("name is null!");//这做了判断发现name为null
allFields.removeClass('ui-state-error');
$('#users tbody').append('<tr>' +
'<td>' + name.val() + '</td>' + 
'<td>' + email.val() + '</td>' + 
'<td>' + password.val() + '</td>' +
'</tr>'); 
$(this).dialog('close');
},
Cancel: 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");
}); });
</script>
</head>
<body><div class="demo"><div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p> <form>
<fieldset>
<label for="name">Name</label>
<input type="radio" name="f" value="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="radio" name="f" id="email" value="email" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="radio" name="f" value="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</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>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user" class="ui-button ui-state-default ui-corner-all">Create new user</button></div><!-- End demo --></body>
</html>其实我意图很简单，就是想通过在Dialog中通过radio单选，把此值给表格中输出.请大家一起看一下  谢谢