当我单击jsp中单选按钮的特定选项时，我想显示一个文本框

Question

我有2个选项的单选按钮。 它像

      <td>City : </td>
      <td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
      <td><input type="radio" name="r_city" value="Different" />Different</td>
      <td>textbox here</td>

当我单击“不同”时，我想显示一个文本框。

它是一个JSP页面。 谢谢。

Answer 1

在这里，如果您想再次隐藏它，只需使用.hide（）函数

<table>
  <tr>
    <td>City : </td>
    <td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
    <td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
    <td class="show-this" style="display:none">textbox here</td>
  </tr>
</table>

<script>
    $('#testChecked').click(function(){
      if ($(this).is(':checked'))
      {
        $('.show-this').show();
      }
  });
</script>

确保添加jQuery ***

Answer 2

知道您使用哪个javascript框架会很高兴。

使用香草javascript，这是一种在click事件上添加和删除隐藏类的简单方法，因为这很可能是确保浏览器兼容性的唯一方法。

https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview

// js
window.onload = () => {
  var rad2 = document.getElementById('r2');
  var rad1 = document.getElementById('r1');
  var input = document.getElementById('myInput');
  rad2.addEventListener("click", function(){
    input.classList.remove('hidden');
  });
  rad1.addEventListener("click", function(){
    input.classList.add('hidden');
  });
}


// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>

// css
.hidden {
    display: none;
}

Answer 3

这是您需要做的。 如果对<td>的文本框使用通用类，则可以使用类选择器代替input[type="text"] 。

 $(document).ready(function(){ $("input[type='radio']").click(function(){ var textBox = $(this).closest('tr').find('td input[type="text"]'); if($(this).val() === 'Different'){ $(textBox).show(); } else { $(textBox).hide(); } }); }); 

 td input[type='text'] { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>City : </td> <td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td> <td><input type="radio" name="r_city" value="Different" />Different</td> <td><input type='text' /></td> </tr> <tr> <td>City : </td> <td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td> <td><input type="radio" name="r_city1" value="Different" />Different</td> <td><input type='text' /></td> </tr> </table>