.toggle（）

Question

我目前正在做一个项目。我有2个单选按钮，1）单程2）往返。当用户尝试选择单向单选按钮时，返回文本字段将隐藏。

我看到一个帖子，有人就这个问题发表评论。场景：我选择单向单选按钮，返回字段将消失，是的它正在工作但是有一些问题。如果我改变主意，从单向电台按钮到往返旅行怎么办？问题是返回字段没有回来

**查看**

//我的单选按钮

<div class="pure-u-1-1 radiobtn">
     <form action="">
           <input type="radio" name="flight_type"  value="one_way" class="onew" style=""  >One Way
           <input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
     </form>
</div>

//将隐藏/显示

的返回字段

<div class="pure-u-1-1 dr" id="try">
      <label for="return" class="drr">Return</label>
      <input type="text" id="return" name="return" class="departreturn"><br>

</div>

JS

<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function(){
    $('div[id^="try"]').hide(); // hide all DIVs begining with "my_radio_"
    $('#' + $(this).attr('id') + '_text').show(); // show the current one
});

</script>

Answer 1

只需使用.toggle()

即可

.toggle（）

描述：显示或隐藏匹配的元素。

没有参数，.toggle（）方法只是切换元素的可见性：

参考：http://api.jquery.com/toggle/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1-1 radiobtn">
  <form action="">
    <input type="radio" name="flight_type" value="one_way" class="onew" style="">One Way
    <input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
  </form>
</div>

<div class="pure-u-1-1 dr" id="try">
  <label for="return" class="drr">Return</label>
  <input type="text" id="return" name="return" class="departreturn"><br>

</div>


<script type="text/javascript">
  $(document).on('change', 'input:radio[name=flight_type]', function() {
    $('div[id^="try"]').toggle(); // toggle all DIVs begining with "my_radio_"
    $('#' + $(this).attr('id') + '_text').show(); // show the current one
  });
</script>

选中单选按钮codeigniter时显示或隐藏字段

1 个答案:

.toggle（）