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

很高兴知道您使用的是哪种javascript框架。

对于vanilla javascript,这是一种添加和删除单击事件隐藏类的简单方法,因为这很可能是保证浏览器兼容性的唯一方法。

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

给你,如果你想再次隐藏它,就用吧。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***

以下是您需要做的事情。如果您对内部的文本框使用公共类 <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>