如果選中某個復選框，我該如何做到在文本框中需要輸入？

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>

我該怎么做，如果選中了“其他”復選框，則需要填寫文本框？ 我不介意文本框是否只在復選框被選中時出現。 否則，如果未選中“其他”復選框，則不需要在文本框中輸入。

注意：不能使用 jQuery 或內聯 JavaScript。必須鏈接到外部 JavaScript 文件。

Answer 1

您可以做的是監聽所需復選框值的變化（這里我們采用另一個），這樣當復選框的值（選中或未選中）發生變化時，我們可以將 textarea 的 required 屬性設置為 true（此處為 otherBox）使用js等等..

解決方案

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>
  <label for="subject">Subject:</label>

  <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
  <input type="submit" value="Apply">
</form>

JS

      const other = document.querySelector("#other");
      const otherbox = document.querySelector("#otherbox")
      other.addEventListener("input" , (e)=>{
        if(other.checked){
          otherbox.required = true;
        }else{
          otherbox.required = false;
        }
      })