Javascript 如何使用ASP.NET MVC显示基于单选按钮的内容？

例如，如果我创建两个单选按钮：

@Html.RadioButtonFor(model => model.IsFemale, "false") Male
@Html.RadioButtonFor(model => model.IsFemale, "true") Female

按下true时如何显示一个div，按下false时如何隐藏它并显示另一个div

我创建了一个非常简单的网站来测试这一点：

@model WebApplication1.Models.Testi
<div>

        @Html.RadioButtonFor(model => model.isTest, "false", new { id = "male" })


        @Html.RadioButtonFor(model => model.isTest, "true", new { id = "female" })


        if (Model.isTest)
        {
            <div>
                Testdiv
            </div>
        }



</div>

---

您需要使用JavaScript。向两个单选按钮添加

onclick

事件，并调用传递单选按钮值的JavaScript函数：

@Html.RadioButtonFor(model => model.IsFemale, "false", new { onclick = "showNote(this.value);" }) Male
@Html.RadioButtonFor(model => model.IsFemale, "true", new { onclick = "showNote(this.value);" }) Female

然后添加要显示/隐藏的两个

div

s：

<div id="male">Notes for men</div>
<div id="female">Notes for women</div>

男士须知
妇女须知

最后添加将完成此任务的JavaScript函数：

<script>
  function showNote(isFemale) {
    var male = document.getElementById("male");
    var female = document.getElementById("female");
    if (isFemale == "true") {
      female.style.display = "block";
      male.style.display = "none";
    } else {
      male.style.display = "block";
      female.style.display = "none";
    }
  }
</script>

功能显示说明（isFemale）{
var male=document.getElementById（“male”）；
var female=document.getElementById（“女性”）；
如果（isFemale==“true”）{
female.style.display=“block”；
male.style.display=“无”；
}否则{
male.style.display=“block”；
female.style.display=“无”；
}
}

您必须通过javascript执行此操作，因为Razor是服务器端的，仅在页面加载时运行。请展示你尝试过的东西；否则，此问题很可能会被关闭。您的更新将仅在页面加载时使用当前值。您需要添加javascript来处理用户的操作和所需的界面更改。关于如何处理用户点击单选按钮的问题，有很多例子。如果你做一点搜索，你可能会找到你需要的帮助。

<script>
  function showNote(isFemale) {
    var male = document.getElementById("male");
    var female = document.getElementById("female");
    if (isFemale == "true") {
      female.style.display = "block";
      male.style.display = "none";
    } else {
      male.style.display = "block";
      female.style.display = "none";
    }
  }
</script>