ラジオボタンの結果は、表示/非表示divでボディのオンロードで表示されます

Question

これは、選択したラジオボタンの結果を示します。ページが更新されてdiv表示がなく、結果が表示されないときに問題が発生します。私はCarsbuy divをページリフレッシュに表示したい。

$(document).ready(function() { 
     $("input[name$='mode']").click(function() { 
      var test = $(this).val(); 

      $("div.desc").hide(); 
      $("#Cars" + test).show(); 
     }); 
    }); 

<input type="radio" name="mode" checked="checked" value="buy" /> 

<label>Buy</label> 

<input type="radio" name="mode" value="rent" /> 

<Label>Rent</label> 

<div id="Carsbuy" class="desc" style="display: none;"> 

    Buy Cars Result Display Here On Select Buy 

</div> 

<div id="Carsrent" class="desc" style="display: none;"> 

    Rent Cars Result Display Here On Select Rent 
</div> 

Answer 1

私はあなたの要件を理解しているので、以下のようにしてください。

HTML：

<input type="radio" name="mode" checked="checked" value="buy" /> 
<label>Buy</label> 
<input type="radio" name="mode" value="rent" /> 
<Label>Rent</label> 
<div id="CarsDetails" class="desc"> 
    // include buy type cars initialy while page load. 
</div> 

はJQuery：

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { // detect when radio button is clicked 
    var carType = $(this).val(); // get the value of selected radio type 
    $.ajax({ 
     url : "cartype.php", // link to file containing data of cars 
     type : "GET", // request type 
     data : "carType="+carType, // send the selected car type (buy or rent) 
     datatype : "html", 
     success : function(response){ // get the response 
      $('#CarsDetails').html(response); // put the response in div. 
     } 
    }); 
    }); 
}); 

Answer 2

ページのロード時に靴の特定のDIVにあなたのjsのコードの先頭に次のように使用することができ

：

$("#Carsbuy").show(); 

編集：特定のDIVとラジオボタンの

、使用後：

var selected = 'rent'; 
$("div.desc").hide(); 
$("#Cars" + selected).show(); 
$('input[value="' + selected + '"]').attr('checked', true); 

あなたが特定のラジオボタンを選択しvar selectedの値を変更することができますし、DIV

Demo

Answer 3

次のコードでは、ページのロード時にラジオボタンが選択されているかどうかを確認し、適切なdivが表示されるようにします。何のラジオボタンが

$(document).ready(function() { 
var selected = $("input[type='radio']:checked").val(); 

if(selected !== 'undefined') 
{ 
    $("#Cars" + selected).show(); 
} 

$("input[type='checkbox']:checked").attr('id') 
    $("input[name$='mode']").click(function() { 
     var test = $(this).val(); 

     $("div.desc").hide(); 
     $("#Cars" + test).show(); 
    }); 
});