使用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(); 

});