Question

我有这个简单的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>

Answer 1

试一试。

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>

Answer 2

这是一个使用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>

html输入框消失

2 个答案: