Ajaxとラジオボタンを使用して可視性を切り替える

Question

私のpage1.phppage2.phpの表示を切り替えたいと思います。

私は次のコードを使用しています：私はこのコードを使用してpage2.phpを呼び出す

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

を：

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

私はラジオボタン場合page2.phpを表示したいですラジオボタン、または「Machester」ラジオボタンが選択されていない場合は何も表示されません（非表示）。

---

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

});