页面加载时根据CheckBox选中状态隐藏或显示div的实现方法

针对使用asp-for标签绑定的ASP.NET Core Razor场景，可按以下方式实现，兼顾初始化状态匹配和后续交互逻辑：

核心思路 #

页面DOM加载完成后第一时间读取CheckBox的checked属性值，根据选中/未选中状态设置目标Div的显示属性，同时绑定CheckBox的change事件，保证后续手动勾选时状态同步。如果想要更顺滑的加载体验，也可以直接通过Razor语法在服务端渲染阶段就设置好Div的初始显示状态，避免加载闪烁。

具体实现步骤 #

• 编写页面基础结构，注意asp-for绑定布尔属性时，框架会自动生成一个同name的隐藏input存储false值，选元素时要注意筛选。

  <!-- CheckBox绑定模型布尔属性，示例绑定属性名为ShowCustomSection -->
  <div class="form-check">
      <input class="form-check-input" type="checkbox" asp-for="ShowCustomSection">
      <label class="form-check-label" asp-for="ShowCustomSection">显示自定义内容区块</label>
  </div>
  
  <!-- 需要控制显隐的目标Div -->
  <div id="customContentBlock">
      这里是仅勾选CheckBox后才展示的内容
  </div>
  

• 编写JS逻辑，必须在DOM加载完成后执行，避免找不到元素：

  document.addEventListener('DOMContentLoaded', function () {
      // 筛选元素时指定type=checkbox，避开框架自动生成的隐藏input
      const checkBox = document.querySelector('input[type="checkbox"][name="ShowCustomSection"]');
      const targetDiv = document.getElementById('customContentBlock');
  
      // 抽离统一的显隐控制方法
      const setDivVisible = () => {
          targetDiv.style.display = checkBox.checked ? 'block' : 'none';
      };
  
      // 页面初始化阶段直接执行一次，匹配初始选中状态
      setDivVisible();
  
      // 绑定切换事件，后续手动操作CheckBox时同步更新显隐
      checkBox.addEventListener('change', setDivVisible);
  });
  

优化方案（无加载闪烁） #

如果不想等JS执行才设置初始状态，可以直接在Razor渲染阶段输出Div的初始display样式，体验更好：

<div id="customContentBlock" style="display: @(Model.ShowCustomSection ? "block" : "none")">
    这里是仅勾选CheckBox后才展示的内容
</div>

这种写法下JS不需要再做初始化执行，只需要绑定change事件处理后续交互即可。

常见踩坑说明 #

• 选CheckBox元素时必须加type="checkbox"筛选条件，否则会选到asp-for自动生成的同name隐藏input，导致读取checked状态失败。
• 不要把JS逻辑写在页面对应元素的前面且不加DOM加载监听，会因为元素还没渲染完成报错。
• 如果项目里用了jQuery，逻辑完全一致，写法可以更简洁：

  $(function () {
      const toggleBlock = () => {
          $('#customContentBlock').toggle($('input[type="checkbox"][name="ShowCustomSection"]').is(':checked'));
      };
      toggleBlock(); // 初始化执行
      $('input[type="checkbox"][name="ShowCustomSection"]').on('change', toggleBlock);
  });
  

内容的提问来源于stack exchange，提问作者Tim Eulink