How do I make it so that an input is required in a textbox if a certain checkbox is selected?

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>

How do I make it so that, if the "other" checkbox is selected, the textbox is required to be filled out? I don't mind if the textbox only appears if the checkbox is selected or not. Otherwise, if the "other" checkbox is not selected, it will not be required to have an input in the textbox.

Note: Cannot use jQuery or inline JavaScript. Must be linked to an external JavaScript file.

Answer 1

What you can do is listen for change in the value of the desired checkbox ( here we take other one ) such that when the value of the checkbox ( checked or not ) is changed we can set required attribute to true for textarea ( here otherBox ) using js and so on ..

Solution

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;
        }
      })