jquery从select更改为type = radio

时间:2014-03-06 10:26:24

标签: javascript jquery html

这是工作示例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>

7 个答案:

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

DEMO

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

Fiddle Demo

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