勾选「其他」复选框时如何设置对应文本框为表单提交必填项

实现方案（推荐：勾选后才显示文本框，体验更优） #

直接替换原有表单代码即可，无需额外依赖：

<form id="skillForm">
        <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="otherContainer" style="display: none;">
          <label for="subject">其他技能说明：</label>
          <textarea id="otherbox" name="subject" placeholder="请填写你的其他技能" style="height:200px"></textarea>
        </div>
        <input type="submit" value="Apply">
 </form>

<script>
// 获取元素
const otherCheckbox = document.getElementById('other');
const otherContainer = document.getElementById('otherContainer');
const otherBox = document.getElementById('otherbox');
const form = document.getElementById('skillForm');

// 监听复选框状态变化
otherCheckbox.addEventListener('change', () => {
  if (otherCheckbox.checked) {
    // 选中时显示文本框，加必填校验
    otherContainer.style.display = 'block';
    otherBox.required = true;
  } else {
    // 取消选中时隐藏，移除必填校验
    otherContainer.style.display = 'none';
    otherBox.required = false;
    otherBox.value = ''; // 可选：取消选中时清空已填内容
  }
});

// 如不需要自动隐藏，仅要提交校验，可删掉上面的change监听代码，改用下面的提交监听逻辑：
/*
form.addEventListener('submit', (e) => {
  if (otherCheckbox.checked && otherBox.value.trim() === '') {
    alert('请填写你的其他技能说明');
    e.preventDefault(); // 阻止表单提交
  }
});
*/
</script>

逻辑说明 #

• 方案默认用浏览器原生的required属性做校验，无需自己写提交拦截逻辑，选中「其他技能」选项后文本框自动显示，且为空时点击提交会触发浏览器自带的必填提示
• 如果需要文本框一直显示，仅在勾选其他技能时做必填校验，可注释掉change监听代码，放开注释里的submit监听代码即可
• 所有逻辑均为原生JS实现，无需引入任何外部库

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