这是工作示例http://jsfiddle.net/p4stK/或此处
Select <select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="first" value="first">first</option>
<option name="second" value="second">second</option>
<option name="computer" value="computer">computer</option>
<option name="car" value="car">car</option>
</select>
<div id="first">Information first</div>
<div id="second">Information second</div>
<div id="computer">Somthing about computer here</div>
<div id="car">Somthing about car here</div>
和
$(function () {
$('#car').hide();
$('#computer').hide();
$('#second').hide();
$('#type').change(function () {
$('#computer').hide();
if (this.options[this.selectedIndex].value == 'computer') {
$('#computer').show();
}
$('#car').hide();
if (this.options[this.selectedIndex].value == 'car') {
$('#car').show();
}
$('#first').hide();
if (this.options[this.selectedIndex].value == 'first') {
$('#first').show();
}
$('#second').hide();
if (this.options[this.selectedIndex].value == 'second') {
$('#second').show();
}
});
});
我需要使用type = radio like
这个代码<form>
<input type="radio" name="check" value="first"><b>First</b><br />
<input type="radio" name="check" value="second"><b>Second</b><br />
<input type="radio" name="check" value="computer"><b>Computer</b><br />
<input type="radio" name="check" value="car"><b>Car</b>
</form>
答案 0 :(得分:2)
<强> HTML 强>
Select<input type="radio" name="check" checked value="first"/>first
<input type="radio" name="check" value="second"/>second
<input type="radio" name="check" value="computer"/>computer
<input type="radio" name="check" value="car"/>car
<div id="first">Information first</div>
<div id="second">Information second</div>
<div id="computer">Somthing about computer here</div>
<div id="car">Somthing about car here</div>
<强>的Javascript 强>
$(function () {
$("#second,#computer,#car").hide();
$("input[name='check']").click(function () {
$("#first,#second,#computer,#car").hide();
$("#" + this.value).show();
});
});
JS小提琴: http://jsfiddle.net/p4stK/4/
答案 1 :(得分:1)
您可以使用:
$('input[name="check"]')
而不是:
$('#type')
和
$("input[name='check']:checked").val()
而不是:
this.options[this.selectedIndex].value
<强> Updated Fiddle 强>
答案 2 :(得分:0)
您只需使用如下所示的jQuery选择器
$('input[name=check]:checked').val();
获取已检查的raido值,其他事情是如此简单,对吧?
答案 3 :(得分:0)
试试这个
$(function () {
$('#car').hide();
$('#computer').hide();
$('#second').hide();
$('input[name="check"]').change(function () {
$('#computer').hide();
if (this.value == 'computer') {
$('#computer').show();
}
$('#car').hide();
if (this.value == 'car') {
$('#car').show();
}
$('#first').hide();
if (this.value == 'first') {
$('#first').show();
}
$('#second').hide();
if (this.value == 'second') {
$('#second').show();
}
});
});
答案 4 :(得分:0)
尝试此解决方案。
<强> HTML 强>
<form>
<input type="radio" name="check" value="first"><b>First</b><br />
<input type="radio" name="check" value="second"><b>Second</b><br />
<input type="radio" name="check" value="computer"><b>Computer</b><br />
<input type="radio" name="check" value="car"><b>Car</b>
</form>
<div class="blocks" id="first">Information first</div>
<div class="blocks" id="second">Information second</div>
<div class="blocks" id="computer">Somthing about computer here</div>
<div class="blocks" id="car">Somthing about car here</div>
<强>脚本强>
$('.blocks').hide();
$('input[type="radio"]').on('change', function(){
$('.blocks').hide();
$('#'+$(this).attr('value')).show();
});
答案 5 :(得分:0)
我已经用可能的答案here
更新了你的小提琴JS如下
$(function () {
$('div.showOnChange:not(:first)').hide();
$(':radio[name="check"]').change(function(e){
var elem = $(this);
$('div.showOnChange').hide();
$('#'+elem.val()).show();
});
});
答案 6 :(得分:0)
尝试以下代码
$("input[name=check]").click(function(){
var divId="#"+$(this).val();
$("div").hide();
$(divId).show();
});