如果选中某个复选框，如何要求文本框中的输入？

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>

​

如果选中了“其他”复选框，则必须填写文本框，否则无法提交表单。我必须使用JavaScript来完成这个任务。请详细解释，因为我对JavaScript相当陌生。

Answer 1

是的，您可以很容易地使用JavaScript实现这一点：

HTML：

<input
    type="checkbox"
    id="other"
    name="other"
    value="other"
    onclick="otherCheckBox()"
  />

(只需将onclick事件添加到“其他”复选框中，以便每当单击时它就会触发一个函数)

联署材料：

<script>
  function otherCheckBox() {
    var checkBox = document.getElementById("other");  //Getting the 'other' CheckBox
    var otherBox = document.getElementById("otherbox");  //Getting the TextBox
    if (checkBox.checked) {
      otherBox.required = "true"; //Setting the 'required' parameter to true if checkbox is checked
    } else {
      otherBox.required = "";  //Setting the 'required' parameter to false if the checkbox is not checked
    }
  }
</script>

将此脚本标记添加到html头中。

触发时，此函数将检查是否选中id other复选框。如果选中它，它将设置文本框的必需的属性( id otherbox为true )，如果不选中，则将其设置为false。