如何使用单选按钮显示和隐藏表格？

Frank 发表于 Dev

坦率

您是否有想法重写jQuery代码以在两个选择选项（是和否）之间进行选择？。

我在jQuery中尝试过此方法：

$(document).ready(function() {
    $("#send_to_one").hide();
    $("input:radio[name='decision']").change(function(){

    if(this.checked){
        if(this.value =='one'){
            $("#send_to_one").show() && $("#send_to_two").hide()
        }else if(this.value =='two'){
            $("#send_to_two").show()
        }else{
           $("#send_to_one").hide();
        }
    }
    });
});

CSS：

#send_to_one{
   display:none;
}

#send_to_two{
   display:none;
}

“是”按钮send_to_one效果很好，如果我选择它，则会显示正确的信息，send_to_two并且隐藏其中的信息。如果选择“否”按钮，send_to_two则会显示来自的信息，但send_to_one仍会显示信息。我尝试从第一个if语句使用命令，但这不起作用。你有什么想法？

感谢您的帮助，但始终我都会添加推荐的命令，因此send_to_two操作无效。

这是我的_form。我在那里可能犯了一个错误吗？

<h2>Are you insured?</h2> <div id="send_to"> <input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/> <input type="radio" id="send_poll" name="decision" value="two" />No<br/> <div id="send_to_one"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div> </div> </div> </div> <div id="send_to_two"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"> <div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div> </div> </div> </div> </div> </div>

感谢您的帮助！

扎卡里亚·阿查尔基（Zakaria Acharki）

在第二种情况下，您只是缺少了hide语句，您的代码应为：

if(this.value =='one')
{
    $("#send_to_one").show();
    $("#send_to_two").hide();
}else if(this.value =='two'){
    $("#send_to_two").show();
    $("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one'
}else{
    $("#send_to_one").hide();
}

因为如果您使用jquery对象，则使用jquery更好$(thhis)：

$(document).ready(function() {
    $("#send_to_one").hide();
    $("input:radio[name='decision']").change(function()
    {
        if( $(this).is(':checked')  )
        {
            if($(this).val()==='one')
            {
                $("#send_to_one").show();
                $("#send_to_two").hide();
            }
            else if($(this).val()==='two')
            {
                $("#send_to_two").show();
                $("#send_to_one").hide();
            }
            else
            {
               $("#send_to_one").hide();
            }
        }
    });
});

希望这可以帮助。

$(document).ready(function() {
  $("#send_to_one").hide();

  $("input:radio[name='decision']").change(function(){
    if($(this).is(':checked'))
    {
      if($(this).val()==='one')
      {
        $("#send_to_one").show();
        $("#send_to_two").hide();
      }
      else if($(this).val()==='two')
      {
        $("#send_to_two").show();
        $("#send_to_one").hide();
      }
      else
      {
        $("#send_to_one").hide();
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='decision' value='one'/>Yes
<input type="radio" name='decision' value='two' checked/>No
<br/>
<div id="send_to_one">
  send_to_one div 
</div>

<div id="send_to_two">
  send_to_two div
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。