你有相当多的JavaScript在单选按钮上工作。你正在使用的javaScript实际上是创建动态<span>元素并完全隐藏单选按钮。虽然这可能更好地支持旧浏览器，但更“经得起未来考验”（有人甚至可能会说“正确”）这样做的方法是通过纯CSS。它更简单，给你更多的选择和定制，而且它的加载速度比那个巨大的JavaScript文件快得多。
所以，虽然这可能不完全是你来这里寻找的，但我鼓励你至少给予一试。

示例：我所做的一切。

给予看：进入你的图像编辑器并删除文本。2现在，显示在按钮上的文本在你的HTML代码中。3比图像编辑容易得多，也更快。

代码解释：制作自订CSS选项按钮

input[type=radio] {
    display:none; 
}

这将选中页面上的所有单选按钮，并赋予它们一个display:none属性。它将隐藏单选按钮，因为您不想再看到这些丑陋的东西。

input[type=radio] + label { ... }

这将选择所有单选按钮标签。在我们的HTML中，我们为每个<input>元素创建了标签。这是HTML的一个内置特性：当标签被点击时，单选按钮会自动被选中。这里我们不需要任何javascript！不要多此一举。
这里，我们定义背景图像和要在背景图像上显示的文本的样式（如果有）。在本例中，它们是“XS”、“S”和“M”。我使用display:table-cell并排显示这些按钮（就像在您的链接中一样）并使用vertical-align属性。如果没有文本，只需将其更改为display:inline-block并从那里进行调整。

input[type=radio]:checked + label { ... }

最后，我们为选定的选项指定样式。在您的例子中，我将背景图像向下移动了42 px（background-position:0 -42px;）。同样，您需要从图像中删除文本。您可以查找其他样式-您可以通过添加以下内容使文本“发光”：
text-shadow:2px 2px 10px #FF00FF;
你可以在细节上玩玩。即使它不会显示IE8和之前版本的图像，它仍然会很好地回到你在<label>中的任何文本。它只会去普通的旧单选按钮。聪明到使用Chrome或保持IE更新的人，嗯，他们会得到额外的视觉糖果。

我猜你是在问这样的问题：
http://jsfiddle.net/vybEf/1/

$('.styled').click(function(){
    var idS=$(this).attr('id');
    var s=idS.substring(5,7);
    $('#txt').css({'font-size':''+s+'px'});
    $('#txt').html(''+s+'px');
});