点击不同的单选按钮(radio)出现不同的内容

写了一段时间的js了，TMD遇到一个问题还是得折腾半天...

今天给一个zblog模板增加了一个功能。前台的一个模块可以调用不同的数据，后台配置项里面用户可以选择，用的是单选按钮，不同的选项要出现不同的参数，于是用jq写了一个巨丑的代码（反正需求是实现了），代码如下：

html：

<p>
    <input id="list"  onclick="acheck1()" type="radio" name="list" value="1">选项1 
    <input id="list"  onclick="acheck2()" type="radio" name="list" value="2">选项2
</p>
<p class="box1"  style="display:none">点击第一个显示这里</p>
<p class="box2"  style="display:none">点击第二个显示这里</p>

js：

function acheck1(){
    $(".box1").show();
    $(".box2").hide();
}
function acheck2(){
    $(".box2").show();       
    $(".box1").hide();
}
$(function(){
    var list = $('#list:checked').val();
    if( list == 1){
        $(".box1").show();
    }
    if( list == 2){
        $(".box2").show();
       }
});

真特么暴力，真特么丑，按我这个进度或许要等个几年才能写出优雅的代码吧。。。