C# 如何使用javascript实现隐藏和显示单选按钮

我从一个网站上看到了这个例子，我正在学习如何为这种类型的视图实现javascript或JQuery。其中未分配id

阶级

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用System.Web.Mvc.Html；
使用System.Linq.Expressions；
使用系统文本；
命名空间MVC3\u RadioButtonList\u Helper\u示例
{
公共静态类
{
公共静态MvcHtmlString RadioButtonForSelectList(
这个HtmlHelper HtmlHelper，
表情表情，
IEnumerable列表值）
{
var metaData=modelmetada.FromLambdaExpression（表达式，htmlHelper.ViewData）；
var sb=新的StringBuilder（）；
if（listOfValues！=null）
{
//为列表中的每个项目创建一个单选按钮
foreach（在listOfValues中选择ListItem项）
{
//生成要给单选按钮字段的id
var id=string.Format（“{0}{1}”，metaData.PropertyName，item.Value）；
//使用现有html帮助程序创建并填充单选按钮
var label=htmlHelper.label（id，HttpUtility.HtmlEncode（item.Text））；
var radio=htmlhelp.RadioButtonFor（表达式，item.Value，new{id=id}）.ToHtmlString（）；
//创建将返回给客户端的html字符串
//例如，第1行
sb.附件格式（“{0}{1}”，收音机，标签）；
}
}
返回MvcHtmlString.Create（sb.ToString（））；
}
}
}

模型

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.ComponentModel.DataAnnotations；
使用System.Web.Mvc；
命名空间MVC3\u RadioButtonList\u Helper\u Sample.Models
{
公共类索引模型
{
公共IEnumerable TestRadioList{get；set；}
公共IEnumerable TestRadioList2{get；set；}
[必需（ErrorMessage=“您必须为TestRadio选择一个选项”）]
公共字符串TestRadio{get；set；}
[必需（ErrorMessage=“您必须为TestRadio2选择一个选项”）]
公共字符串TestRadio2{get；set；}
}
公开课考试
{
公共Int32 ID{get；set；}
公共字符串名称{get；set；}
}
}

控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC3_RadioButtonList_Helper_Sample.Models;

namespace MVC3_RadioButtonList_Helper_Sample.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/
        public ActionResult Index()
        {
            List<aTest> list = new List<aTest>();
            list.Add(new aTest() { ID = 1, Name = "Line1" });
            list.Add(new aTest() { ID = 2, Name = "Line2" });
            list.Add(new aTest() { ID = 3, Name = "Line3" });
            SelectList sl = new SelectList(list, "ID", "Name");

            List<aTest> list2 = new List<aTest>();
            list2.Add(new aTest() { ID = 1, Name = "test1" });
            list2.Add(new aTest() { ID = 2, Name = "test2" });
            SelectList sl2 = new SelectList(list2, "ID", "Name");

            var model = new IndexViewModel();
            model.TestRadioList = sl;
            model.TestRadioList2 = sl2;

            model.TestRadio = "2";  // Set a default value for the first radio button helper

            return View(model);
        }

        [HttpPost]
        public ActionResult Index(IndexViewModel model, string returnUrl)
        {
            if (ModelState.IsValid)
            {
                ModelState.AddModelError("", "Always force an error to be raised so we can test the postback sets the radio buttons to their last values.");
            }

            // If we got this far, something failed, redisplay form
            List<aTest> list = new List<aTest>();
            list.Add(new aTest() { ID = 1, Name = "Line1" });
            list.Add(new aTest() { ID = 2, Name = "Line2" });
            list.Add(new aTest() { ID = 3, Name = "Line3" });
            SelectList sl = new SelectList(list, "ID", "Name");

            List<aTest> list2 = new List<aTest>();
            list2.Add(new aTest() { ID = 1, Name = "test1" });
            list2.Add(new aTest() { ID = 2, Name = "test2" });
            SelectList sl2 = new SelectList(list2, "ID", "Name");

            model.TestRadioList = sl;
            model.TestRadioList2 = sl2;

            return View(model);
        }
    }
} 

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.Mvc；
使用MVC3\u RadioButtonList\u Helper\u Sample.Models；
命名空间MVC3\u RadioButtonList\u Helper\u Sample.Controllers
{
公共类TestController:控制器
{
//
//获取：/Test/
公共行动结果索引（）
{
列表=新列表（）；
添加（new aTest（）{ID=1，Name=“Line1”}）；
Add（new aTest（）{ID=2，Name=“Line2”}）；
添加（new aTest（）{ID=3，Name=“Line3”}）；
SelectList sl=新的SelectList（列表，“ID”、“名称”）；
List list2=新列表（）；
添加（new aTest（）{ID=1，Name=“test1”}）；
添加（new aTest（）{ID=2，Name=“test2”}）；
SelectList sl2=新的SelectList（列表2，“ID”、“名称”）；
var模型=新的IndexViewModel（）；
model.TestRadioList=sl；
model.TestRadioList2=sl2；
model.TestRadio=“2”；//为第一个单选按钮辅助对象设置默认值
返回视图（模型）；
}
[HttpPost]
公共操作结果索引（IndexViewModel模型，字符串返回URL）
{
if（ModelState.IsValid）
{
AddModelError（“，”始终强制引发错误，以便我们可以测试回发将单选按钮设置为其最后的值。“）；
}
//如果我们走到这一步，有些东西失败了，重新显示形式
列表=新列表（）；
添加（new aTest（）{ID=1，Name=“Line1”}）；
Add（new aTest（）{ID=2，Name=“Line2”}）；
添加（new aTest（）{ID=3，Name=“Line3”}）；
SelectList sl=新的SelectList（列表，“ID”、“名称”）；
List list2=新列表（）；
添加（new aTest（）{ID=1，Name=“test1”}）；
添加（new aTest（）{ID=2，Name=“test2”}）；
SelectList sl2=新的SelectList（列表2，“ID”、“名称”）；
model.TestRadioList=sl；
model.TestRadioList2=sl2；
返回视图（模型）；
}
}
} 

看法

@RadioButtonForSelectList（m=>m.TestRadio，Model.TestRadioList）
@Html.ValidationMessageFor（m=>m.TestRadio）
选择Line1时显示此内容
选择第2行时显示此内容
选择第3行时显示此内容

Html

第1行
第2行
第3行

当我选择radiobutton1即line1时，我如何以类似的方式显示testdiv1所有div

---

资料来源：http://jonlanceley.blogspot.com/2011/06/mvc3-radiobuttonlist-helper.html

如果元素之间有1:1的关系，那么使用索引是一种简单而干净的方法

// handle radio group change event
$('input[name="TestRadio"]').on('change', function() {

    // switch on the radio value
    switch(this.value){
         case '1':
             $('[id*="testidiv"]').hide();
             $('#testidiv1').show();
             return;
         case '2':
             $('[id*="testidiv"]').hide();
             $('#testidiv2').show();
             return;
         case '3':
             $('[id*="testidiv"]').hide();
             $('#testidiv3').show();
             return;
    }
});

var $radios=$('input[name="TestRadio"]'), $content=$('[id*="testdiv"]');    
$radios.on('change', function() {
    var idx= $radios.index(this);
    $content.hide().eq(idx).show()
});

---

如果是客户端问题，发布生成的HTML和JavaScriptYou，请解释什么是“testdiv”。selector正在寻找一个包含“testdiv”字符串的id，以匹配“testdiv1”、“testdiv2”等。将公共类名添加到元素中，一个用于收音机，一个用于内容，会更干净。不需要以这种方式解析ID，所以它将是testdiv而不是testdiv。对了，我很困惑，谢谢老兄。我得到了一个“$radios.on不是函数”。你能帮我做这个吗。

<div>
@Html.RadioButtonForSelectList(m => m.TestRadio, Model.TestRadioList)
@Html.ValidationMessageFor(m => m.TestRadio)
</div>

<div id= "testdiv1" style="display:none">
  Show this content when Line1 is selected
<div>
<div id="testdiv2">
Show this content when Line2 is selected
<div>
<div id="testdiv3" style="display:none">
Show this content when Line3 is selected
<div>

<div class="RadioButton">
<input id="TestRadio_1" type="radio" value="1" name="TestRadio" data-val-required="You must select an option for TestRadio" data-val="true">
<label for="TestRadio_1">Line1</label>
</div>
<div class="RadioButton">
<input id="TestRadio_2" type="radio" value="2" name="TestRadio" checked="checked">
<label for="TestRadio_2">Line2</label>
</div>
<div class="RadioButton">
<input id="TestRadio_3" type="radio" value="2" name="TestRadio" >
<label for="TestRadio_3">Line3</label>
</div>

// handle radio group change event
$('input[name="TestRadio"]').on('change', function() {

    // switch on the radio value
    switch(this.value){
         case '1':
             $('[id*="testidiv"]').hide();
             $('#testidiv1').show();
             return;
         case '2':
             $('[id*="testidiv"]').hide();
             $('#testidiv2').show();
             return;
         case '3':
             $('[id*="testidiv"]').hide();
             $('#testidiv3').show();
             return;
    }
});

var $radios=$('input[name="TestRadio"]'), $content=$('[id*="testdiv"]');    
$radios.on('change', function() {
    var idx= $radios.index(this);
    $content.hide().eq(idx).show()
});