在外部Javascript中处理单选按钮

我有一个带有三个单选按钮的页面，例如：

我希望在单击其中一个按钮时，元素的字体大小会发生如下变化：

$("viewer").style.fontSize = "5pt";

在Javascript中使用三个单独的函数来实现这一点非常简单。尽管我还没有测试过，但类似于以下的东西应该可以工作：

window.onload = function() {
    $("small").onclick = small;
    $("medium").onclick = medium;
}

function small(){
    $("viewer").style.fontSize = "5pt";
}

function medium(){
    $("viewer").style.fontSize = "15pt";
}

有没有办法把它们合并成一个更大的函数？

Small
function changeSize(size, elem){
   elem.css('font-size', size);
}

中等
大的
$（'input[name=size]'）。单击（函数（）
{
var clickedVal=$（this.val（）；
变量大小=5；
开关（clickedVal）
{
“小型”案例：
尺寸=5；
打破
案例“中等”：
尺寸=10；
打破
“大型”案例：
尺寸=15；
打破
}
$（'#查看器'）.css（'fontSize'，size+'pt'）；
}

小
中等
大的
超大
$（'input[name=size]'）。单击（函数（）{
$（'#viewer'）.css（'fontSize'，$（this.val（）+'pt'）；
}

您可以添加更多尺寸的新单选按钮，而无需更改脚本

<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large

<script>
$('input[name=size]').click(function()
{
    var clickedVal = $(this).val();
    var size = 5;

    switch (clickedVal)
    {
        case 'small':
            size = 5;
        break;

        case 'medium':
            size = 10;
        break;

        case 'large':
            size = 15;
        break;
    }

    $('#viewer').css('fontSize', size + 'pt');
}
</script>

<input type="radio" name="size" value="5">Small
<input type="radio" name="size" value="15">Medium
<input type="radio" name="size" value="25">Large
<input type="radio" name="size" value="35">Super Big

<script>
$('input[name=size]').click(function() {
   $('#viewer').css('fontSize', $(this).val() + 'pt');
}
</script>