尽管我已经回答了这个问题，但我想提出一个相对更复杂的场景，并展示我们如何使用 jQuery 管理复选框以相互影响。
设想
- 想象一下，我们有一个书籍列表（来自数据库或任何其他存储库）
- 用户可以说：“我喜欢这本书。”
- 用户可以说：“我喜欢这本书。”
规则：
- 如果用户喜欢一本书，这意味着他/她也喜欢它。
- 如果用户不喜欢一本书，他/她也不会喜欢它。
代码
楷模：
namespace MvcApplication1.Models
{
public class Book
{
public string Title { get; set; }
public bool IsLikeIt { get; set; }
public bool IsLoveit { get; set; }
}
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
视图模型：
namespace MvcApplication1.ViewModels
{
public class BookViewModel
{
public Models.Person User { get; set; }
public List<Models.Book> Books { get; set; }
public BookViewModel()
{
Books = new List<Models.Book>();
}
}
}
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
BookViewModel viewModel = new BookViewModel();
viewModel.User = new Models.Person()
{ FirstName = "John", LastName = "Smith" };
viewModel.Books.Add(new Models.Book()
{ Title = "Beginning ASP.NET 4: in C# and VB" });
viewModel.Books.Add(new Models.Book()
{ Title = "Professional ASP.NET 4 in C# and VB" });
viewModel.Books.Add(new Models.Book()
{ Title = "Pro ASP.NET MVC 3 Framework" });
viewModel.Books.Add(new Models.Book()
{ Title = "Microsoft ASP.NET CODING STRATEGIES-W/ ASP .NET TEAM" });
viewModel.Books.Add(new Models.Book()
{ Title = "Pro ASP.NET 4 in C# 2010, Fourth Edition" });
return View(viewModel);
}
[HttpPost]
public ActionResult Index(BookViewModel viewModel)
{
//save data.
return View(viewModel);
}
}
查看（\Home\Index.cshtml）：
@using MvcApplication1.Models
@model MvcApplication1.ViewModels.BookViewModel
<div>
<p>
User name: @Html.DisplayFor(u => u.User.FirstName)
@Html.DisplayFor(u => u.User.LastName)</p>
</div>
<div>
@using (Html.BeginForm())
{
@Html.HiddenFor(u => u.User.FirstName)
@Html.HiddenFor(u => u.User.LastName)
<table border="1">
<thead>
<tr>
<th>
I like it
</th>
<th>
I Love it
</th>
<th>
Book title
</th>
</tr>
</thead>
<tbody>
@for (int index = 0; index < Model.Books.Count; index++)
{
<tr>
<td>@Html.CheckBoxFor(b => b.Books[index].IsLikeIt, new { id = string.Format("like-it-{0}", index), data_index = index })
</td>
<td>@Html.CheckBoxFor(b => b.Books[index].IsLoveit, new { id = string.Format("love-it-{0}", index), data_index = index })
</td>
<td>@Html.DisplayFor(b => b.Books[index].Title)
@Html.HiddenFor(b => b.Books[index].Title)
</td>
</tr>
}
</tbody>
</table>
<input type="submit" value="Submit" />
}
</div>
<script type="text/javascript">
$(function () {
$('input[id^="like-it-"]').change(function (e) { likeit_clicked(e); });
$('input[id^="love-it-"]').change(function (e) { loveit_clicked(e); });
});
function likeit_clicked(event) {
if (!event.target.checked) {
var index = $(event.target).attr('data-index');
var loveitid = '#love-it-' + index;
$(loveitid).attr('checked', false);
}
}
function loveit_clicked(event) {
if (event.target.checked) {
var index = $(event.target).attr('data-index');
var likeitid = '#like-it-' + index;
$(likeitid).attr('checked', true);
}
}
</script>
视图可能看起来很糟糕。您可以根据自己的需求开发更好的视图。
顺便说一句，在 MVC 视图引擎生成的渲染 html 中，您可以看到复选框的长名称：
name="Books[0].IsLikeIt"
name="Books[1].IsLikeIt"
name="Books[2].IsLikeIt"
.
.
.
但是通过生成我们自己的 id ( id = string.Format("like-it-{0}", index)) 和定义data-index属性，jQuery 能够以适当的方式选择和更改此复选框。
另请阅读：HTML5 自定义数据属性 (data-*)