jQuery根据checkbox勾选状态控制div显隐代码不生效问题求助

• 仅在代码加载时执行了一次状态判断，未绑定change事件，checkbox勾选状态变化时不会重新触发显隐逻辑
• 若代码放置在DOM元素渲染之前执行，会无法获取到#address和#options节点，逻辑直接失效
• 未做初始状态同步，页面首次加载时div的显隐状态和checkbox的初始勾选状态不匹配

jQuery版本 #

将逻辑包裹在DOM加载完成回调中，同时绑定checkbox的状态变化事件，可直接用toggle方法简化判断：

$(function() {
  // 绑定checkbox状态变化事件
  $('#address').on('change', function() {
    $('#options').toggle($(this).prop('checked'))
  })
  // 页面加载后同步一次初始状态
  $('#address').trigger('change')
})

原生JavaScript版本 #

无需依赖jQuery的实现方案：

document.addEventListener('DOMContentLoaded', function() {
  const addressCheckbox = document.getElementById('address')
  const optionsDom = document.getElementById('options')

  function toggleOptions() {
    optionsDom.style.display = addressCheckbox.checked ? 'block' : 'none'
  }

  // 绑定状态变化监听
  addressCheckbox.addEventListener('change', toggleOptions)
  // 初始化同步状态
  toggleOptions()
})

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