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;
}

“是”按钮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>

Answer 2

if(this.checked){
        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()
        }else{
           $("#send_to_one").hide();
        }
    }

Answer 3

试试这个并检查您的代码是否缺少;

 $(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();
                $("#send_to_one").hide();
            }
        }
        });
    });

Answer 4

希望这会对你有所帮助：

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

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

4 个答案: