我猜你大概率踩了模态框动态渲染导致事件绑定失效的坑——毕竟Bootstrap模态框默认是动态插入DOM的，要是你在页面刚加载时就绑定Checkbox的事件，这时候模态框里的元素还没出现在DOM里，自然触发不了逻辑。下面给你几个靠谱的解决办法：

方法一：借助Bootstrap模态框的shown.bs.modal事件绑定逻辑 #

这是最稳妥的方案，它会等模态框完全显示、所有DOM元素都加载完成后，再绑定事件：

// 监听模态框显示完成的事件
$('#你的模态框ID').on('shown.bs.modal', function () {
  // 此时模态框内的Checkbox已经存在于DOM中
  $('#ddd').on('change', function() {
    // 假设要控制的Div ID是targetDiv，这里写显示隐藏逻辑
    if($(this).is(':checked')) {
      $('#targetDiv').show();
    } else {
      $('#targetDiv').hide();
    }
  });
});

方法二：使用事件委托（Event Delegation） #

如果你的模态框是通过JS动态生成的，事件委托能让父容器监听子元素的事件，不管子元素什么时候被添加到DOM里：

// 把事件绑定到稳定存在的父容器（比如body，或者模态框本身）
$('body').on('change', '#ddd', function() {
  // 用toggle方法简化代码，直接根据选中状态切换显示隐藏
  $('#targetDiv').toggle($(this).is(':checked'));
});

方法三：先排查选择器和事件触发情况 #

有时候问题比想象中简单——你可能写错了要控制的Div的ID/类名。可以先在Checkbox的change事件里加个日志，确认事件有没有被触发：

$('#ddd').on('change', function() {
  console.log('Checkbox状态变了！');
  // 其他逻辑
});

如果控制台没输出，说明事件没绑定上，回到方法一或二解决；如果有输出，那就是控制Div的代码有问题，检查选择器是否匹配。

额外注意事项 #

• 如果你用的是Bootstrap 3/4，要确保已经引入了jQuery；Bootstrap 5可以不用jQuery，但如果写了jQuery语法就得引入
• 想用原生JS实现的话（Bootstrap 5推荐），可以这么写：

document.getElementById('你的模态框ID').addEventListener('shown.bs.modal', function() {
  const checkbox = document.getElementById('ddd');
  const targetDiv = document.getElementById('targetDiv');
  checkbox.addEventListener('change', function() {
    targetDiv.style.display = this.checked ? 'block' : 'none';
  });
});

最后给你补个完整的示例代码，方便你参考：

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">示例模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="ddd" />
          <label class="form-check-label" for="ddd">DDD</label>
        </div>
        <!-- 要控制显示隐藏的Div -->
        <div id="targetDiv" style="display:none; margin-top:10px;">
          这个Div会随Checkbox显示/隐藏
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$('#exampleModal').on('shown.bs.modal', function () {
  $('#ddd').on('change', function() {
    $('#targetDiv').toggle($(this).is(':checked'));
  });
});
</script>

内容的提问来源于stack exchange，提问作者Pasan Chamikara