基于单选按钮选择的嵌套复选框实现（Razor Pages+jQuery）

1. 前端页面代码（.cshtml） #

直接在Razor页面里写表单结构和交互逻辑，单选按钮互斥、复选框联动显示的逻辑用jQuery实现：

@page
@model YourProject.Pages.OptionSelectModel
@{
    ViewData["Title"] = "选项选择";
}

<form method="post">
    <div>
        <label>
            <input type="radio" name="SelectedOption" value="Option1" checked /> 选项1
        </label>
        <label>
            <input type="radio" name="SelectedOption" value="Option2" /> 选项2
        </label>
    </div>

    <!-- 复选框组，初始隐藏 -->
    <div id="checkboxContainer" style="display: none; margin-top: 10px;">
        <label>
            <input type="checkbox" name="SelectedLists" value="List0" /> List0
        </label>
        <label>
            <input type="checkbox" name="SelectedLists" value="List1" /> List1
        </label>
    </div>

    <button type="submit" style="margin-top: 15px;">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(function() {
        // 监听单选按钮切换事件
        $('input[name="SelectedOption"]').on('change', function() {
            const isOption2Selected = $(this).val() === 'Option2';
            // 显示/隐藏复选框组
            $('#checkboxContainer').toggle(isOption2Selected);
            // 如果切换回选项1，清空复选框选中状态
            if (!isOption2Selected) {
                $('#checkboxContainer input[type="checkbox"]').prop('checked', false);
            }
        });
    });
</script>

2. 后台处理代码（.cshtml.cs） #

用Razor Pages的绑定特性接收表单提交的数据，处理Post请求：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourProject.Pages
{
    public class OptionSelectModel : PageModel
    {
        // 绑定单选按钮选中值
        [BindProperty]
        public string SelectedOption { get; set; }

        // 绑定复选框选中的列表（支持多选）
        [BindProperty]
        public List<string> SelectedLists { get; set; } = new List<string>();

        public void OnGet()
        {
            // 页面初始化逻辑（可选）
        }

        public IActionResult OnPost()
        {
            // 这里写你的业务逻辑，比如数据校验、保存到数据库等
            // 示例：打印提交的内容（实际项目替换为业务代码）
            Console.WriteLine($"选中选项：{SelectedOption}");
            if (SelectedOption == "Option2" && SelectedLists.Any())
            {
                Console.WriteLine("选中的列表：" + string.Join(", ", SelectedLists));
            }

            // 提交后重定向回当前页面（或其他页面）
            return RedirectToPage();
        }
    }
}

关键细节说明 #

• 单选按钮必须共用同一个name属性，才能保证互斥选择。
• 复选框组初始通过display: none隐藏，jQuery用toggle()方法根据单选按钮状态切换显示。
• 切换回选项1时清空复选框选中状态，避免之前的选择被意外提交。
• 用[BindProperty]标记属性，Razor Pages会自动将Post请求的表单数据绑定到这些属性上。

内容的提问来源于stack exchange，提问作者Jimbo Jones