这显示所选单选按钮的结果。我有一个问题,当刷新页面时,没有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.
}
});
});
});