JSP页面点击单选按钮“Different”选项时显示文本框的实现

嘿，这个需求挺常见的，用前端JavaScript就能轻松实现！下面给你两种实用的方案，你可以根据项目情况选择：

方法一：原生JavaScript实现（无依赖） #

首先在JSP页面里写好单选按钮和文本框的HTML结构，文本框默认设置为隐藏：

<!-- 单选按钮组 -->
<label>
  <input type="radio" name="option" value="Same" checked> Same
</label>
<label>
  <input type="radio" name="option" value="Different"> Different
</label>

<!-- 要动态显示/隐藏的文本框容器，默认隐藏 -->
<div id="textBoxContainer" style="display: none; margin-top: 10px;">
  <label for="differentInput">请输入内容：</label>
  <input type="text" id="differentInput" name="differentInput">
</div>

接着添加原生JavaScript逻辑，监听单选按钮的切换事件：

// 获取所有单选按钮和文本框容器
const radioOptions = document.querySelectorAll('input[name="option"]');
const textBoxWrapper = document.getElementById('textBoxContainer');

// 给每个单选按钮绑定change事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', function() {
    // 根据选中的值切换文本框的显示状态
    textBoxWrapper.style.display = this.value === 'Different' ? 'block' : 'none';
    
    // 可选优化：隐藏时清空输入框内容，避免提交无效值
    if (this.value !== 'Different') {
      document.getElementById('differentInput').value = '';
      // 也可以设置输入框为禁用状态，这样表单提交时不会携带该字段
      // document.getElementById('differentInput').disabled = true;
    } else {
      // 显示时恢复启用状态
      // document.getElementById('differentInput').disabled = false;
    }
  });
});

方法二：jQuery实现（如果项目已引入jQuery） #

如果你的项目已经引入了jQuery，代码会更简洁，HTML结构和上面一致，只需要替换JavaScript部分：

$(document).ready(function() {
  // 监听单选按钮组的切换事件
  $('input[name="option"]').on('change', function() {
    const isDifferentSelected = $(this).val() === 'Different';
    // 用toggle方法直接切换显示状态
    $('#textBoxContainer').toggle(isDifferentSelected);
    
    // 同样可选：隐藏时清空输入框
    if (!isDifferentSelected) {
      $('#differentInput').val('');
      // $('#differentInput').prop('disabled', true);
    } else {
      // $('#differentInput').prop('disabled', false);
    }
  });
});

额外小提示 #

• 推荐把样式抽离到CSS文件中，比如定义一个.hidden类：.hidden { display: none; }，然后用classList.toggle('hidden')来切换，这样更符合内容与样式分离的原则。
• 如果需要在表单提交时验证“Different”选项对应的文本框是否必填，可以在提交事件里添加判断逻辑。

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