我想在 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>

我想在单击 "Different" 时显示一个文本框。

这是一个 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 框架。

使用 vanilla javascript 这是一种简单的方法，通过在点击事件中添加和删除隐藏 class 只是因为这很可能是保证浏览器兼容性的唯一方法。

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> 内的文本框使用常见的 class ，那么您可以使用 class 选择器而不是 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>

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

I want to display a textbox when I click on a particular option of a radio button in jsp

javascript

jsp

textbox

radio-button

display