单选按钮结果显示在显示/隐藏分区中的正文加载上


Radio buttons result show on body onload in show/hide div

这显示所选单选按钮的结果。我有一个问题,当刷新页面时,没有div显示,也没有结果显示。我想在页面刷新时显示Carsbuydiv。

    $(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>

您可以在js代码的开头使用以下内容来在页面加载上引导特定的div:

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

编辑:

对于特定的DIV和单选按钮,请使用以下内容:

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

您可以更改var selected的值以选择特定的单选按钮和DIV

演示

在下面的代码中,在页面加载时检查是否选择了单选按钮,然后显示相应的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();
    });
});

我非常了解您的需求,您可以按以下方式进行操作。

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