代码之家 › 专栏 › 技术社区 › Gireesh Pai

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

display radio-button textbox jsp javascript

Gireesh Pai · 技术社区 · 6 年前

我有一个单选按钮,有两个选项。事情是这样的

      <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页面。谢谢

3 回复 | 直到 6 年前

Royalsmed 6 年前

很高兴知道您使用的是哪种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;
}

Manjil Lama 6 年前

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

Ankit Agarwal 6 年前

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