如何仅在选中某个复选框时才要求在文本框中输入

Question

 <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> <label for="subject">Subject:</label> <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea> <input type="submit" value="Apply"> </form>

如果选中“其他”复选框，我该如何设置，必须先填写文本框才能提交表单。 我知道如何使用选项下拉列表而不是复选框来执行此操作。 在选中“其他”复选框之前，我不介意文本框是否隐藏。

Answer 1

您可以通过更改事件使用复选框值在文本区域上设置所需的属性，以使其具有反应性。

 const other = document.getElementById('other'), subject = document.getElementById('otherbox'); other.onchange = function() { subject.required = this.checked; };

 <form id="suvery"> <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> <label for="subject">Subject:</label> <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea> <br> <input type="submit" value="Apply"> </form>

Answer 2

您可以执行以下操作：

 document.getElementById('other').onchange = (e) => { if (e.target.checked) { document.getElementById('otherbox').required = true; } else { document.getElementById('otherbox').required = false; } }

 <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> <label for="subject">Subject:</label> <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea> <input type="submit" value="Apply"> </form>