Javascript MVC4使用单选按钮选择不同的输出

我正在使用下拉列表进行不同的选择

 <div class="editor-field">
        @Html.DropDownListFor(model => model.Id, Model.PossibleIds)
        @Html.ValidationMessageFor(model => model.Id)

我希望单选按钮具有相同的功能， 当我选择单选按钮1时，我想要一个显示“You have selected 1”的文本 当我选择单选按钮2时，我想要一个显示“You have selected 2”的文本，依此类推。要实现这一点，我必须对Javascript进行哪些更改？ 我当前的Jquery脚本（根据下拉列表，我将Val更改为Onclick或checked事件，但没有任何效果）

---

没有看到您的JavaScript，我只能假设您正在使用jQuery。如果是这样，那么下面的内容将为您提供您所需要的

var selectedVal = $("input[type='radio'][name='Id']:checked");
if (selectedVal.length > 0) {
    $('#spanDisplayValue').text(selectedVal);
}

编辑以处理特定代码。我认为上面的代码是实现目标的一种更有效的方法，但为了给您一个示例，我保留了核心逻辑

(function ($) {
    $("input[name=Id]:radio").change(function () {
    var selectedVal = $("input[type='radio'][name='Id']:checked");
    if (selectedVal == 1) {
        $('.1-option').hide();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').hide();

    } else if (selectedVal == 2) {
        $('.1-option').show();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').show();
    }
    else if (selectedVal == 3) {
        $('.1-option').hide();
        $('.2-option').hide();
        $('.3-option').hide();
        $('.4-option').show();
        $('.5-option').hide();

---

你能帮我修改上面的jQuery单选按钮吗？嗨，谢谢你的帮助。我真的很感激。我在这里提到的Jquery脚本完全符合我的需要。我做了你提到的改变。但没有运气脚本不起作用。旧脚本与下拉菜单配合得很好，但新脚本不起作用。我在这里遗漏了什么吗？（函数（$）{$（“输入[name=Id]：收音机”）.change（函数（）{var selectedVal=$（“输入[type='radio'][name='Id']：选中”）.val（）；if（selectedVal==1）{}else（selectedVal==2）{$（'.1-option'）.show（）；$（'.2-option'）.show（）；$（'.3-option'）.hide（）；$（'.4-option'）.hide（）；$（'.5-option'）.show（）；您需要验证在各个单选按钮上呈现的HTML元素的名称是否相同。

var selectedVal = $("input[type='radio'][name='Id']:checked");
if (selectedVal.length > 0) {
    $('#spanDisplayValue').text(selectedVal);
}

(function ($) {
    $("input[name=Id]:radio").change(function () {
    var selectedVal = $("input[type='radio'][name='Id']:checked");
    if (selectedVal == 1) {
        $('.1-option').hide();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').hide();

    } else if (selectedVal == 2) {
        $('.1-option').show();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').show();
    }
    else if (selectedVal == 3) {
        $('.1-option').hide();
        $('.2-option').hide();
        $('.3-option').hide();
        $('.4-option').show();
        $('.5-option').hide();