javascript - 隐藏四个单选按钮中的两个

Question

我有一个小程序，其中包含 4 个单选按钮，这些按钮分别分为 2 个“FromLocal”单选按钮和 2 个“FromServer”单选按钮。 所以我试图根据条件隐藏单选按钮: 如果选择“FromLocal”中的任何单选按钮，那么它将隐藏我编写的程序的“FromServer”单选按钮 HTML:

<div id ="radiobutton1" >
  <strong>FromLocal:</strong>
  <input type="radio" name="target" value= "BrowserDownload">BrowseLocal
  <input type="radio" name="target" value="dumpToS3"  > S3Remote 

<br/>
</div>
<!-- <div> -->
<div id="textboxes" style="display: none" >
  <strong>ACCESS_KEY_ID: </strong>
  <input class="box"  type="text" / > <br/>
  <strong>ACCESS_SECRET_KEY: </strong>
  <input  class="box" type="text" /> <br/>
  <strong>MAIL: </strong>
  <input  class="box" type="text"  /> <br/>
</div>

  <strong>FromServer:</strong>
  <input type="radio" name="server" value="serverDownload" id ="radiobutton2" >ServerBrowseLocal
  <input type="radio" name="server" value="serverdumpToS3"id ="radiobutton2" > ServerS3Remote

JS:

$("input[name='target']").on('change',function(){
    if($(this).val() == "dumpToS3")
       $('#textboxes').show('slow');
    else
        $('#textboxes').hide();
});
$(function() {
if ($('#radiobutton2').is(':checked')) 
    $('#radiobutton1').hide();
 else if ($('#radiobutton1').is(':checked')) 
    $('#radiobutton2').hide();
});

这是我尝试运行它的站点链接:

http://jsfiddle.net/y92kuzcL/29/

我已经尝试过，但不知道为什么它不起作用，也许我编写的代码不正确。 请帮助我如何获取它。

谢谢。

Answer 1

单击其他 2 个单选按钮(服务器/本地)时，这会隐藏其他 2 个单选按钮(本地/服务器)

$("#radiobutton1 > input").change(function(){$("#server").hide()})
$("#server > input").change(function(){$("#radiobutton1").hide()})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="radiobutton1" >
  <strong>FromLocal:</strong>
  <input type="radio" name="target" value= "BrowserDownload">BrowseLocal
  <input type="radio" name="target" value="dumpToS3"  > S3Remote 

<br/>
</div>
<!-- <div> -->
<div id="textboxes" style="display: none" >
  <strong>ACCESS_KEY_ID: </strong>
  <input class="box"  type="text" / > <br/>
  <strong>ACCESS_SECRET_KEY: </strong>
  <input  class="box" type="text" /> <br/>
  <strong>MAIL: </strong>
  <input  class="box" type="text"  /> <br/>
</div>
<div id="server">
  <strong>FromServer:</strong>
  <input type="radio" name="server" value="serverDownload" id ="radiobutton2" >ServerBrowseLocal
  <input type="radio" name="server" value="serverdumpToS3"id ="radiobutton2" > ServerS3Remote
  </div>