如何使用jQuery实现复选框勾选时显示/隐藏字段？

看起来你已经有了基本思路，但代码里有几个小问题需要调整。先看看你的原始代码片段：

<input type="checkbox" class="input-checkbox " name="billing_wcj_checkout_field_2" id="billing_wcj_checkout_field_2" value="1"> 
<input type="text" class="input-text " name="billing_eu_vat_number" id="billing_eu_vat_number" placeholder="EU VAT Number" value=""> 
<script> 
jQuery(function() { 
  jQuery('input[type="checkbox"]').on('change', function() { 
    jQuery(this).find('#billing_eu_vat_numbe...
});
</script>

你的核心问题在于：

1. jQuery(this).find(...) 是在当前复选框的子元素里查找目标输入框，但实际上这两个元素是同级关系，find 在这里不适用
2. 选择器没写完整（#billing_eu_vat_numbe... 少了结尾的r）
3. 没有处理页面加载时的初始状态（比如页面刷新后，复选框如果是勾选状态，输入框应该默认显示）

下面是修正后的完整代码，我会一步步解释：

<input type="checkbox" class="input-checkbox " name="billing_wcj_checkout_field_2" id="billing_wcj_checkout_field_2" value="1"> 
<input type="text" class="input-text " name="billing_eu_vat_number" id="billing_eu_vat_number" placeholder="EU VAT Number" value="" style="display: none;"> 
<script> 
jQuery(function() {
  // 定义目标输入框的选择器，方便复用
  const vatField = jQuery('#billing_eu_vat_number');
  // 定义复选框的选择器，用ID定位更精准，避免影响其他复选框
  const checkbox = jQuery('#billing_wcj_checkout_field_2');

  // 封装切换逻辑为函数，方便重复调用
  function toggleVatField() {
    if (checkbox.is(':checked')) {
      vatField.show();
    } else {
      vatField.hide();
    }
  }

  // 页面加载时先执行一次，处理初始状态
  toggleVatField();

  // 给复选框绑定change事件，状态变化时触发切换
  checkbox.on('change', toggleVatField);
});
</script>

关键细节说明： #

• 精准选择器：用#billing_wcj_checkout_field_2直接定位目标复选框，比input[type="checkbox"]更精准，不会误触发页面上其他复选框的事件
• 初始状态处理：页面加载时调用toggleVatField()，确保如果复选框默认是勾选状态（比如从后端渲染的），输入框会正确显示
• 同级元素选择：直接通过ID选择目标输入框，而不是用find（find仅查找当前元素的后代节点，不适合同级元素场景）
• 样式初始化：给输入框默认加上style="display: none;"，确保页面刚加载时如果复选框未勾选，输入框是隐藏的

如果想要更流畅的动画效果，可以把show()和hide()换成slideToggle()：

// 替换toggleVatField函数里的逻辑
vatField.slideToggle(checkbox.is(':checked'));

这样就能完美实现勾选复选框时显示VAT输入框，取消勾选时隐藏它的功能啦！

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