基于Checkbox/Select的jQuery模态表单元素显隐控制问题咨询

嘿，这个问题问得很好，刚好能帮你理清jQuery事件绑定的核心逻辑差异！咱们一步步拆解原因：

1. Checkbox的内联事件绑定天生“免时机” #

你的Checkbox用的是内联事件属性（onchange="valueChanged()"），这种绑定方式是直接附着在HTML元素本身的：

• 不管元素是页面加载时就存在，还是后续动态生成的，只要这个元素出现在DOM里，触发change事件时浏览器就会直接执行指定的函数。
• 模态框隐藏时，Checkbox元素其实已经存在于DOM树中（只是被CSS隐藏了），所以从页面加载完成后，这个内联事件就已经生效了，完全不需要等模态框显示再做绑定操作。

2. Select的绑定依赖“元素存在时机” #

你的Select用的是jQuery的change()方法直接绑定到元素上，这种方式有个关键前提：绑定事件时，目标元素必须已经存在于DOM中。

• 如果你的模态框是动态加载内容的（比如每次打开模态框时重新渲染表单，或者通过AJAX获取模态框HTML），那页面初始加载时#track_type这个元素还没出现在DOM里，这时候直接在document ready里绑定事件是无效的。
• 而Bootstrap的shown.bs.modal事件是在模态框完全显示、内容已经渲染到DOM中之后才触发的，这时候再绑定change事件，就能确保#track_type已经存在，绑定自然就成功了。

额外技巧：用事件委托统一解决时机问题 #

其实你可以用jQuery的事件委托来彻底避免这种“绑定时机”的困扰，不管元素是一开始就存在还是动态生成的，事件都能生效。比如把Select的绑定改成这样，就不用依赖shown.bs.modal了：

// 事件委托：把事件绑定到始终存在的父元素，通过选择器匹配目标元素
$(document).on('change', '#track_type', function() {
  if ($(this).val() === 'Source') {
    $('.mfnswitch').show();
  } else {
    $('.mfnswitch').hide();
  }
});

事件委托的原理是把事件绑定到一个始终存在的父元素上，当事件从目标元素冒泡到父元素时，再判断触发事件的元素是否匹配指定选择器，这样即使后续动态生成元素，事件也能正常触发。

顺便优化你的Checkbox逻辑 #

你的valueChanged()函数里的判断可以简化一下，重复的条件没必要写两次，直接根据选中状态切换显示隐藏就行：

function valueChanged() {
  const isChecked = $('.checkboxinput').is(':checked');
  if (isChecked) {
    $('.hidden').show();
    $('.mfnhide').hide();
  } else {
    $('.hidden').hide();
    $('.mfnhide').show();
  }
}

这样逻辑更清晰，也更容易维护~

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