表单中选中指定复选框时如何通过JavaScript设置文本框为必填项

前置修改 #

先给你的form标签添加id属性，方便JS获取元素，修改后：

<form id="skillForm">
<!-- 其余原有表单内容保持不变 -->
</form>

完整JS代码 #

把下面这段代码放在页面</body>标签之前即可正常运行：

// 等待页面所有DOM元素加载完成后再执行代码，避免找不到元素的报错
document.addEventListener('DOMContentLoaded', function() {
  // 1. 获取需要用到的三个核心元素：表单、其他技能复选框、其他技能文本框
  const form = document.getElementById('skillForm');
  const otherCheckbox = document.getElementById('other');
  const otherTextarea = document.getElementById('otherbox');

  // 2. 监听表单的提交事件
  form.addEventListener('submit', function(e) {
    // 3. 判断「其他技能」复选框是否被勾选
    if (otherCheckbox.checked) {
      // 4. 去掉文本框内容前后的空白字符，判断是否为空
      const textValue = otherTextarea.value.trim();
      if (textValue === '') {
        // 内容为空的情况：阻止表单默认提交行为
        e.preventDefault();
        // 弹出提示，也可以自行修改为页面内的文字提示
        alert('请填写其他技能说明内容');
        // 自动聚焦到文本框，方便用户直接输入
        otherTextarea.focus();
      }
    }
    // 如果没勾选复选框，或者勾选了且文本框有有效内容，表单会正常提交
  });

  // 可选优化：未勾选其他技能时禁用文本框，降低用户理解成本
  otherCheckbox.addEventListener('change', function() {
    otherTextarea.disabled = !this.checked;
    if (this.checked) {
      otherTextarea.placeholder = "请输入你的其他技能";
      otherTextarea.focus();
    } else {
      otherTextarea.value = '';
      otherTextarea.placeholder = "勾选其他技能后可填写";
    }
  });
});

核心逻辑说明 #

• DOMContentLoaded事件：保证页面所有元素加载完成后再执行JS代码，不会出现获取元素为null的报错
• 元素获取：用getElementById根据id匹配对应DOM元素，后续可以直接操作元素的属性和状态
• 提交事件校验：用户点击提交按钮时会先触发我们自定义的校验逻辑：
  • 用otherCheckbox.checked判断复选框的勾选状态，返回布尔值true/false
  • trim()方法用来去掉文本内容前后的空格、换行符，避免用户只输入空格就通过校验
  • e.preventDefault()：校验不通过时调用这个方法，阻止表单默认的提交跳转行为
• 可选优化部分：监听复选框的选中状态变化，动态修改文本框的可用状态，提升使用体验

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