如何使用jQuery实现勾选复选框时显示指定文本框

没问题，这里有几种简洁可靠的jQuery方法来实现你要的功能——勾选permit复选框时显示short_code文本框，取消勾选则隐藏它：

首先先确认你的原始HTML结构：

<input type="checkbox" id="permit"> 
<input type="text" class="form-control" placeholder="Enter Short Code" name="short_code" id="short_code" autocomplete="off" style="display: none;">

方法1：最简洁的toggle()实现 #

这是最推荐的写法，利用toggle()方法自动根据复选框状态切换元素可见性：

$(document).ready(function() {
  // 给复选框绑定change事件
  $('#permit').on('change', function() {
    // this.checked返回当前复选框的勾选状态，toggle会据此显示/隐藏目标元素
    $('#short_code').toggle(this.checked);
  });
});

优点：代码极简，逻辑清晰，自动处理显示/隐藏的切换。

方法2：显式判断show()/hide() #

如果你需要在显示/隐藏时添加额外逻辑（比如清空输入框、修改样式），可以用这种更直观的写法：

$(document).ready(function() {
  $('#permit').on('change', function() {
    if (this.checked) {
      $('#short_code').show();
      // 这里可以加额外操作，比如：$('#short_code').focus();
    } else {
      $('#short_code').hide();
      // 比如取消勾选时清空输入框：$('#short_code').val('');
    }
  });
});

优点：逻辑明确，方便扩展额外功能。

方法3：处理页面初始化状态 #

如果你的复选框默认可能是勾选状态（比如从后端渲染时带了checked属性），建议加上初始化逻辑，确保页面加载时文本框的状态和复选框一致：

$(document).ready(function() {
  // 先缓存元素，避免重复DOM查询
  const $permitCheckbox = $('#permit');
  const $shortCodeInput = $('#short_code');

  // 页面加载时先设置正确的显示状态
  $shortCodeInput.toggle($permitCheckbox.is(':checked'));

  // 再绑定change事件
  $permitCheckbox.on('change', function() {
    $shortCodeInput.toggle(this.checked);
  });
});

优点：覆盖了初始状态的场景，避免页面加载时出现状态不一致的问题。

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