使用jQuery实现复选框控制下拉列表显隐（JS Razor环境）

没问题，这是个挺常见的交互需求，结合Razor和jQuery很容易搞定。我给你分步骤拆解，保证你能直接复用：

1. Razor视图中的HTML结构 #

首先在你的Razor视图里构建复选框和下拉列表的结构，这里我用Razor的HtmlHelper来绑定Model（当然你也可以用原生HTML，后面会补充）：

<div class="form-group">
    @Html.LabelFor(m => m.IsShowDropdown, "显示下拉列表")
    @Html.CheckBoxFor(m => m.IsShowDropdown, new { @class = "toggle-dropdown-checkbox" })
</div>

<!-- 下拉容器初始隐藏 -->
<div class="form-group dropdown-container" style="display: none;">
    @Html.LabelFor(m => m.SelectedOption, "选择选项")
    @Html.DropDownListFor(m => m.SelectedOption, 
        new SelectList(new[] {
            new { Value = "1", Text = "选项1" },
            new { Value = "2", Text = "选项2" },
            new { Value = "3", Text = "选项3" }
        }, "Value", "Text"), 
        "请选择", 
        new { @class = "form-control" })
</div>

如果不需要绑定Model，直接写原生HTML也完全可以：

<div class="form-group">
    <label><input type="checkbox" class="toggle-dropdown-checkbox"> 显示下拉列表</label>
</div>

<div class="form-group dropdown-container" style="display: none;">
    <label>选择选项</label>
    <select class="form-control">
        <option value="">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
</div>

2. jQuery交互逻辑 #

接下来写核心的交互代码，监听复选框的状态变化，切换下拉列表的显示/隐藏：

// 确保DOM完全加载后再执行代码
$(document).ready(function() {
    // 监听复选框的change事件
    $('.toggle-dropdown-checkbox').on('change', function() {
        // 获取当前复选框的勾选状态
        const isChecked = $(this).is(':checked');
        // 根据状态切换下拉容器的显示/隐藏
        $('.dropdown-container').toggle(isChecked);
    });

    // 重要：页面加载时如果复选框已经是勾选状态（比如编辑页面回显），要主动显示下拉
    if ($('.toggle-dropdown-checkbox').is(':checked')) {
        $('.dropdown-container').show();
    }
});

• 我用了toggle()方法，它可以直接根据传入的布尔值（isChecked）来切换元素的显示状态，比手动写if-else判断要简洁很多。
• 类名toggle-dropdown-checkbox和dropdown-container可以根据你的项目规范调整，只要保证选择器对应上就行。
• 如果是编辑页面，复选框可能从Model里带过来初始勾选状态，所以页面加载时的状态检查很有必要，不然会出现复选框勾选了但下拉却隐藏的情况。

内容的提问来源于stack exchange，提问作者caio oliveira