MVC页面ajax+js实现radio

页面有3个radio单选按钮，点击不同的radio显示相应的内容，同时隐藏别的radio下的内容。

<script type="text/javascript">
        $(document).ready(function () {
            InitalShow();  //页面一加载就根据选择的radio显示或隐藏相应内容
            $("[name='ReportType']").change(function () {
                InitalShow();  //radio值改变就显示或隐藏相应内容
            })
        })

        function InitalShow() {
            var nValue = $('input[name=ReportType]:checked').val()
            if (nValue == 1) {
                $("p.report1").show();
                $("p.report2").hide();
                $("p.report3").hide();
            }
            if (nValue == 2) {
                $("p.report1").hide();
                $("p.report2").show();
                $("p.report3").hide();
            }
            if (nValue == 3) {
                $("p.report1").hide();
                $("p.report2").hide();
                $("p.report3").show();
            }
        }
    </script>

页面标签如下：

    <span><input type="radio" name="ReportType" value="1" checked="checked"/>weekly report</span>
    <br>
    <p class="report1">

...

    </p>

<span><input type="radio" name="ReportType" value="2"/>monthly report</span>
    <br>
    <p class="report2">

...

    </p>

<span><input type="radio" name="ReportType" value="3"/>annual report</span>
    <br>
    <p class="report3">

...

    </p>