HTML5实现单选按钮与数字输入框联动：自动选中Specify及禁用输入

嗨，我来帮你实现这个智能的动态交互效果！咱们一步步来搞定它：

首先，先调整下你的HTML结构——原来的数字输入框和单选按钮用了相同的name，这会导致表单提交时参数冲突，所以咱们给数字框换个name，同时给所有元素加上id，方便后续JS精准操作：

<h2>How many cars you own?</h2>
<form>
  <input type="radio" name="car" id="car-one" checked>
  <label for="car-one">One</label><br>
  <input type="radio" name="car" id="car-two">
  <label for="car-two">Two</label><br>
  <input type="radio" name="car" id="car-specify">
  <label for="car-specify">Specify</label>
  <input type="number" name="car_specify" id="car-number" disabled><br>
</form>

接下来用原生JavaScript实现核心交互逻辑，每一步都加了注释，方便你理解：

// 获取所有需要操作的DOM元素
const radioOne = document.getElementById('car-one');
const radioTwo = document.getElementById('car-two');
const radioSpecify = document.getElementById('car-specify');
const numberInput = document.getElementById('car-number');

// 处理单选按钮的选择事件
function handleRadioSelection() {
  if (this === radioOne || this === radioTwo) {
    // 选了One/Two：禁用数字框并清空内容
    numberInput.disabled = true;
    numberInput.value = '';
  } else {
    // 选了Specify：启用数字框
    numberInput.disabled = false;
  }
}

// 处理数字输入框的输入事件
function handleNumberInput() {
  // 只要输入框有内容，自动选中Specify单选
  if (this.value.trim() !== '') {
    radioSpecify.checked = true;
  }
}

// 给三个单选按钮绑定点击事件
radioOne.addEventListener('click', handleRadioSelection);
radioTwo.addEventListener('click', handleRadioSelection);
radioSpecify.addEventListener('click', handleRadioSelection);

// 给数字输入框绑定输入事件
numberInput.addEventListener('input', handleNumberInput);

交互效果说明： #

• 页面加载后，默认选中“One”，数字输入框处于禁用状态
• 切换到“Two”时，数字框依然禁用，且内容被清空
• 切换到“Specify”时，数字框自动启用，允许输入
• 不管数字框是否提前启用，只要你在里面输入内容，“Specify”单选会自动被选中
• 一旦切回“One”或“Two”，数字框立刻禁用，同时清空里面的内容

如果你项目里已经用了jQuery，也可以用下面的简化版代码：

$(document).ready(function() {
  // 监听单选按钮切换
  $('input[name="car"]').on('change', function() {
    if ($(this).attr('id') === 'car-specify') {
      $('#car-number').prop('disabled', false);
    } else {
      $('#car-number').prop('disabled', true).val('');
    }
  });

  // 监听数字输入框输入
  $('#car-number').on('input', function() {
    if ($(this).val().trim() !== '') {
      $('#car-specify').prop('checked', true);
    }
  });
});

这样就能完美实现你想要的智能交互啦！

内容的提问来源于stack exchange，提问作者R. Gurung