javascript MVC 4 基于复选框检查显示/隐藏文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31411116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC 4 display/hide a textbox based on a checkbox check
提问by SherryA
New to MVC--was never much of a front-end Web developer (mostly backend), so I'm not too privy to good design on the front-end. Now, I'm trying to use MVC without much original WebForm knowledge...that being said, please give me some pointers/links/good ideas on how to handle the following:
MVC 的新手——从来都不是前端 Web 开发人员（主要是后端），所以我不太了解前端的良好设计。现在，我正在尝试在没有太多原始 WebForm 知识的情况下使用 MVC……话虽如此，请给我一些关于如何处理以下问题的指示/链接/好主意：
I have a textbox field that I want to show/hide based on a checkbox. I have these fields in my View @using (Html.BeginForm()...
我有一个文本框字段，我想根据复选框显示/隐藏。我的视图中有这些字段@using (Html.BeginForm()...
Should I change the attribute on the text box in a javascript or controller action? If I use javascript, I'm having a hard time getting to the values in my beginform, but if I use controller action, I'm not sure how/what to pass to/from in my controller action.
我应该在 javascript 或控制器操作中更改文本框上的属性吗？如果我使用 javascript，我很难获得我的 beginform 中的值，但是如果我使用控制器动作，我不确定如何/从我的控制器动作传递到/从什么。
回答by Win
I like using jQuery if I want to manipulate DOM.
如果我想操作 DOM，我喜欢使用 jQuery。
Here the example -
这里的例子 -
View
看法
@using (Html.BeginForm())
{
@Html.CheckBoxFor(model => model.MyBooleanValue)
<br />
@Html.TextBoxFor(model => model.MyTextValue)
<br />
<input type="submit" value="Submit" />
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
$("#MyBooleanValue").click(function () {
if ($(this).is(':checked')) {
$("#MyTextValue").show();
}
else {
$("#MyTextValue").hide();
}
});
});
</script>
Controller
控制器
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new MyViewModel
{
MyBooleanValue = true
};
return View(model);
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
if (model.MyBooleanValue)
{
string text = model.MyTextValue;
}
return View(model);
}
}
Model
模型
public class MyViewModel
{
public bool MyBooleanValue { get; set; }
public string MyTextValue { get; set; }
}
FYI:I suggest watch few videos training (free course at ASP.NET MVC 5 Fundamentals) or read a book or two before starting it. Otherwise, you will get frustrated.
仅供参考：我建议在开始之前观看一些视频培训（ASP.NET MVC 5 Fundamentals 的免费课程）或阅读一两本书。否则，您会感到沮丧。
回答by duxfox--
anything you change on the view (front-end UI manipulation) should be done with Javascript, unless if you're getting or setting some data from/to the database. In this case it looks like its not data manipulation, so its pure javascript UI manipulation
您在视图上更改的任何内容（前端 UI 操作）都应使用 Javascript 完成，除非您正在从/向数据库获取或设置一些数据。在这种情况下，它看起来不是数据操作，所以它是纯 javascript UI 操作
what you want to do is give your textbox and your input a class or id so that you can access them with javascript. And then using that, you can decide whether the checkbox is checked/unchecked to hide/unhide the textbox
您想要做的是为您的文本框和您的输入提供一个类或 ID，以便您可以使用 javascript 访问它们。然后使用它，您可以决定是否选中/取消选中复选框以隐藏/取消隐藏文本框
here are some useful links to get your started:
以下是一些有用的链接，可帮助您入门：
check if checkbox is checked javascript
Check if checkbox is checked with jQuery
jquery - show textbox when checkbox checked
How to hide and show item if checkbox is checked
generally, you will access your server (controller) mainly to save data from your view to the database or to retrieve data from the database to show in your view.
通常，您访问服务器（控制器）的主要目的是将视图中的数据保存到数据库中，或者从数据库中检索数据以显示在视图中。
to set ids on Html helpers ex. @Html.TextBoxForyou need the following:
在 Html 助手上设置 ID，例如。@Html.TextBoxFor您需要以下内容：
@Html.TextBoxFor(x => x.property, new { @id = "someId" }
@Html.TextBoxFor(x => x.property, new { @id = "someId" }
if you want other html attributes:
如果你想要其他 html 属性：
@Html.TextBoxFor(x => x.property, new { @id = "someId", @class="someClass" }
@Html.TextBoxFor(x => x.property, new { @id = "someId", @class="someClass" }
