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

Question

您是否有任何想法重写 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;
}

"is"按钮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>

感谢您的帮助!

Answer 1

您只是缺少第二个条件中的 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对象$(thhis)，你会更好地使用jquery:

$(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>