使用Ajax和单选按钮切换可见性

Question

在我的page1.php我想切换page2.php的可见性。

我使用下面的代码：

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona 
<input type="radio" name="city" value="Manchester"> Manchester 

我使用此代码调用使page2.php：

function getPage2() 
{ 
    $.ajax({ 
     type: "GET", 
     url: "page2.php", 
     success: function(result){ 
      $("#show_results").html(result); 
     } 
    }); 
}; 

我想要显示的则page2.php只有在单选按钮如果没有选择任何单选按钮或“麦克切斯特”单选按钮，则不会显示任何内容（隐藏它）。

---

UPDATE

我解决它。这其实很简单。

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona 
<input type="radio" name="city" value="Manchester" onclick="getPage2(this.value);"> Manchester 

我展示，我使用此代码隐藏使page2.php：

function getPage2() 
     { 

    var var_name = $("input[name='city']:checked").val(); 

    $.ajax({ 
       type: "GET", 
       url: "page2.php", 
       success: function(result){ 


    if(var_name == "Barcelona") 
       $("#show_results").html(result).show(); 
       else 
       $("#show_results").html(result).hide(); 
       } 
      }); 
     }; 

感谢你们反正。

Answer 1

您可以使用jQuery选择为：

$('input').click(function(){ 
    $('input').show(); // Show all inputs 
    $(this).hide(); // Hide the clicked input 

    $.ajax({ 
     type: "GET", 
     url: "page2.php", 
     success: function(result){ 
      $("#show_results").html(result); 
     } 
    }); 
}) 

当然，这仅适用于仅这些投入的页面。

你应该有类或ID到你的无线电通过选择器直接定位它们。

你有这样的事情：

$('.radio-page').click(function(){ // ...

Answer 2

你可以只加载与原来的页面隐藏-能内容。这样你可以避开ajax调用。

<input class="radios" type="radio" name="city" value="Barcelona"> Barcelona 
<input class="radios" type="radio" name="city" value="Manchester"> Manchester 
<div id="content" style="display:none">Hide-able content</div> 

然后只要脚本在选择巴塞罗那时显示它。

$("input[type='radio']").click(function() 
{ 
    if($(this).val() == "Barcelona") $("#content").show(); 
    else $("#content").hide(); 

});