cshtml/razor页面文本框placeholder切换单选按钮时无法恢复初始值问题

问题根因 #

反复切换单选按钮时placeholder错乱，基本都是以下几个原因导致：

• 单选按钮name属性不统一，出现多个同时选中的状态，导致判断逻辑出错
• 切换事件被重复绑定，多次执行赋值逻辑导致值被错误覆盖
• 页面存在重复ID的元素，修改属性时命中了非目标元素
• 初始化时没有匹配默认选中的单选按钮状态，初始placeholder不对

修复方案 #

第一步：确认单选按钮结构规范 #

保证同一组的单选按钮name属性完全一致，示例结构如下：

<input type="radio" name="travelType" value="hotel" id="travelTypeHotel" checked>
<label for="travelTypeHotel">酒店</label>
<input type="radio" name="travelType" value="air" id="travelTypeAir">
<label for="travelTypeAir">机票</label>

第二步：绑定切换事件（优先用原生JS，无依赖） #

注意绑定前先移除旧事件，避免局部刷新后重复绑定：

// 获取DOM元素
const travelTypeRadios = document.querySelectorAll('input[name="travelType"]');
const targetInput = document.getElementById('SearchViewModels_airTravelComponentSubRequestRoundTrip_DepartureAirport');

// 定义切换逻辑
const switchPlaceholder = (e) => {
  if (!e.target.checked) return;
  targetInput.placeholder = e.target.value === 'hotel' ? '请输入城市' : '请输入机场';
  // 可选：切换时清空已输入内容，避免输入值和placeholder逻辑不匹配
  // targetInput.value = '';
}

// 绑定事件
travelTypeRadios.forEach(radio => {
  radio.removeEventListener('change', switchPlaceholder);
  radio.addEventListener('change', switchPlaceholder);
});

// 页面初始化执行一次，匹配默认选中的单选按钮状态
document.querySelector('input[name="travelType"]:checked')?.dispatchEvent(new Event('change'));

如果项目用jQuery，可使用以下代码：

// 绑定前先off移除旧事件，避免重复绑定
$('input[name="travelType"]').off('change').on('change', function() {
  const $target = $('#SearchViewModels_airTravelComponentSubRequestRoundTrip_DepartureAirport');
  $(this).val() === 'hotel' ? $target.attr('placeholder', '请输入城市') : $target.attr('placeholder', '请输入机场');
  // 可选清空输入值
  // $target.val('');
}).trigger('change'); // 初始化执行

额外注意事项 #

你当前的Razor代码中，TextBoxFor绑定的是airTravelComponentSubRequestOneWay下的属性，但手动指定的ID是airTravelComponentSubRequestRoundTrip开头的，如果页面上同时存在往返行程的输入框，会出现ID重复的问题，建议修正ID保证全局唯一，避免选择元素时出错。

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