选中特定复选框时如何将对应文本框设置为必填项（不可用jQuery）

1. 调整原有HTML代码 #

你需要先对现有表单代码做少量调整，给其他技能对应的标签和文本框套上容器，方便统一控制显隐，修改后代码如下：

<form>
  <label>Skills</label>
  <br><br>
  <input type="checkbox" id="skill1" name="skill1" value="Javascript">
  <label for="skill1"> Extensive knowledge of Javascript</label>
  <br><br>
  <input type="checkbox" id="skill2" name="skill2" value="Python">
  <label for="skill2"> Extensive knowledge of Python</label>
  <br><br>
  <input type="checkbox" id="skill3" name="skill3" value="C#">
  <label for="skill3"> Extensive knowledge of Networking</label>
  <br><br>
  <input type="checkbox" id="skill4" name="skill4" value="C#">
  <label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
  <br><br>
  <input type="checkbox" id="skill5" name="skill5" value="C#">
  <label for="skill5"> Extensive knowledge of Security foundations</label>
  <br><br>
  <input type="checkbox" id="skill6" name="skill6" value="C#">
  <label for="skill6"> Extensive knowledge of AWS service selection</label>
  <br><br>
  <input type="checkbox" id="skill7" name="skill7" value="C#">
  <label for="skill7"> Ability to work in a team</label>
  <br><br>
  <input type="checkbox" id="skill8" name="skill8" value="C#">
  <label for="skill8"> 5+ years experience</label>
  <br><br>
  <input type="checkbox" id="skill9" name="skill9" value="C#">
  <label for="skill9"> 10+ years experience</label>
  <br><br>
  <input type="checkbox" id="skill10" name="skill10" value="C#">
  <label for="skill10"> 20+ years experience</label>
  <br><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> I have other skills. Please list other skills below.</label>
  <br><br><br>
  <!-- 新增容器包裹文本框和对应标签 -->
  <div id="otherSkillContainer" style="display: none;">
    <label for="subject">Subject:</label>
    <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
  </div>
  <input type="submit" value="Apply">
</form>
<!-- 引入外部JS文件，放在body末尾 -->
<script src="form-control.js"></script>

2. 编写外部JS文件 #

新建名为form-control.js的文件，和HTML放在同一目录下，代码如下：

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取需要操作的元素
  const otherCheckbox = document.getElementById('other');
  const otherSkillContainer = document.getElementById('otherSkillContainer');
  const otherTextarea = document.getElementById('otherbox');
  const form = document.querySelector('form');

  // 切换文本框显隐和必填状态的函数
  function toggleOtherSkill() {
    const isChecked = otherCheckbox.checked;
    // 控制显隐
    otherSkillContainer.style.display = isChecked ? 'block' : 'none';
    // 切换必填属性，适配原生表单验证
    otherTextarea.required = isChecked;
    // 未选中时清空文本框内容，避免提交冗余数据
    if (!isChecked) {
      otherTextarea.value = '';
    }
  }

  // 初始化状态
  toggleOtherSkill();

  // 监听复选框变更事件
  otherCheckbox.addEventListener('change', toggleOtherSkill);

  // 表单提交兜底校验，避免绕过原生验证
  form.addEventListener('submit', function(e) {
    if (otherCheckbox.checked && otherTextarea.value.trim() === '') {
      e.preventDefault();
      alert('请填写你的其他技能信息');
      otherTextarea.focus();
    }
  });
});

实现说明 #

• 完全使用原生JavaScript实现，无jQuery依赖，无行内JS代码，所有逻辑都在外部JS文件中
• 默认隐藏其他技能文本框，只有勾选对应复选框时才显示，减少页面冗余信息
• 同时支持浏览器原生表单验证和自定义提交校验，双重保证必填逻辑生效
• 未勾选复选框时会自动清空文本框内容，避免提交无效数据

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