簡體   English   中英

html輸入框消失

[英]html input box disappear

我有這個簡單的HTML表單。 具有3個單選框選項。 最后一個單選框選項是“其他”,我希望文本框輸入其他原因,僅在選擇“其他”組合框時才會出現。 有什么辦法嗎?

<html>
  <body>
    <div class="form-group">

        <input type="radio" name="option" value="a"> Missing deadline.<br>
        <input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
        <input type="radio" name="option" value="c"> No response from Accountant.<br>
        <input type="radio" name="option" value="d"> Other reasons. <br>

        <input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons.">

    </div>
  <body>
</html>

試試看。

 function showTextbox() { document.getElementById("reason").style.display = "block"; } 
 <html> <body> <div class="form-group"> <input type="radio" name="option" value="a"> Missing deadline.<br> <input type="radio" name="option" value="b"> Unsatisfied with the work.<br> <input type="radio" name="option" value="c"> No response from Accountant.<br> <input type="radio" name="option" value="d" onclick="showTextbox()"> Other reasons. <br> <input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons." style="display:none"> </div> <body> </html> 

這是使用jQuery的解決方案,方法是將復選框設置為on-change事件:

 $("#test").change(function(){ $("#hidden").show() }); 
 #hidden {display: none} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Click Me <input type="checkbox" id="test"> <div id="hidden">alec</div> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM