2014-03-06 37 views
-1

這裏是工作示例http://jsfiddle.net/p4stK/或這裏jquery的變化爲type =無線電

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

我需要與類型此代碼的工作=無線電像

<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

jsfiddle本身不工作。 – Jobin

+1

,我需要在這裏發佈的代碼。 – Jai

+0

爲我工作,我將編輯並添加代碼 – Nazaret2005

回答

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/

0

你只需要使用下面的jQuery選擇器,

$('input[name=check]:checked').val(); 

得到檢查的raido值,其他的事情都很簡單吧?

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

DEMO

+0

或者只是'$('#first,#second,#computer,#car')。hide(); $('#'+ this.value).show( );'http://jsfiddle.net/Alfie/p4stK/3/ – Anton

+0

工作謝謝) – Nazaret2005

1

您可以使用:

$('input[name="check"]') 

代替:

$('#type') 

和:

$("input[name='check']:checked").val() 

代替:

this.options[this.selectedIndex].value 

Updated Fiddle

+0

感謝所有工作) – Nazaret2005

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

Fiddle Demo

+0

這是最好的,很短,看起來不錯,謝謝))) – Nazaret2005

+0

感謝這樣asnwer 。 –

0

我有一個可能的答案here

更新您的提琴0

JS的是如下

$(function() { 
     $('div.showOnChange:not(:first)').hide(); 
     $(':radio[name="check"]').change(function(e){ 
       var elem = $(this); 
       $('div.showOnChange').hide(); 
       $('#'+elem.val()).show(); 
      }); 
     }); 
0

請嘗試以下代碼

$("input[name=check]").click(function(){ 
     var divId="#"+$(this).val(); 
     $("div").hide(); 
     $(divId).show(); 
    });