基于VIP状态与保修选择的维修周期设置JS实现方案咨询

先补全完整HTML结构 #

首先需要添加一个用于显示维修周期的容器，同时统一选项值的大小写（JS是大小写敏感的）：

<input type="checkbox" id="isVIP" />VIP?
<select name="warranty" id="warranty">
  <option disabled selected>Select warranty</option>
  <option value="none">None</option>
  <option value="regular">Regular</option>
  <option value="extended">Extended</option>
</select>
<div id="repairCycle"></div> <!-- 用于展示维修周期的区域 -->

核心JavaScript代码（纯原生实现） #

// 获取页面元素
const isVIPCheckbox = document.getElementById('isVIP');
const warrantySelect = document.getElementById('warranty');
const repairCycleDisplay = document.getElementById('repairCycle');

// 封装统一的逻辑处理函数
function updateRepairCycle() {
  if (isVIPCheckbox.checked) {
    // VIP勾选状态：禁用保修下拉框，显示7天周期
    warrantySelect.disabled = true;
    repairCycleDisplay.textContent = '最长维修周期：7天';
  } else {
    // 非VIP状态：启用下拉框，根据选中的保修类型匹配周期
    warrantySelect.disabled = false;
    const selectedType = warrantySelect.value;
    
    switch(selectedType) {
      case 'none':
        repairCycleDisplay.textContent = '最长维修周期：1个月';
        break;
      case 'regular':
        repairCycleDisplay.textContent = '最长维修周期：3周';
        break;
      case 'extended':
        repairCycleDisplay.textContent = '最长维修周期：2周';
        break;
      default:
        repairCycleDisplay.textContent = '请选择保修类型';
    }
  }
}

// 给复选框和下拉框绑定状态变化事件
isVIPCheckbox.addEventListener('change', updateRepairCycle);
warrantySelect.addEventListener('change', updateRepairCycle);

// 页面加载完成后执行一次，确保初始状态正确
updateRepairCycle();

关键逻辑说明 #

• 元素获取：用getElementById获取目标DOM元素，这是原生JS最基础的DOM操作方式
• 状态联动：将所有逻辑封装在updateRepairCycle函数中，复选框和下拉框的状态变化都触发这个函数，避免重复代码
• 禁用控制：通过修改下拉框的disabled属性，实现VIP状态下的禁用效果
• 周期匹配：用switch语句处理不同保修类型的周期显示，比多个if更清晰易读
• 初始状态：页面加载时主动执行一次函数，确保默认状态下的UI显示正确

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