jquery中不同的单选按钮如何按类或id显示不同的div答案

【问题标题】：How to different radion button can display different div by class or id in jqueryjquery中不同的单选按钮如何按类或id显示不同的div
【发布时间】：2015-10-29 14:45:58
【问题描述】：

我有一些从 mysql 查询中获取值和类的单选按钮。查询是这样的：

<?php
$result = mysql_query("SELECT * FROM vhcourse WHERE label_id= 1");
while ($row = mysql_fetch_array($result)) {
    if ($row['id']==1) {
        $class="class='course_radios'";
    } elseif ($row['id']==2) { 
        $class="class='course_radios_tw'";
    } else {
        $class="class='course_radios_thr'";
    }
    echo "<input type='radio' ".$class." name='vh_course_radio' value=".$row['course_name'].">" .$row['course_name'];
}
?>

我想做这样的事情：

1) 如果单选按钮选中了 class course_radios，那么 div#one 将是 fadein()。

2) 如果单选按钮选中了 class course_radios_tw，那么 div#two 将是 fadein()。

3) 如果单选按钮选中了 class course_radios_thr，那么 div#three 将是 fadein()。

我想通过 jquery 来做到这一点。请帮我这样做如果可能的话，请给我完整的代码。

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

只需复制文件中的代码并运行它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {

 $(".course_radios").click(function(){
      $( "#one" ).fadeIn( "slow", function() {  });
 });

 $(".course_radios_tw").click(function(){
      $( "#two" ).fadeIn( "slow", function() { });
 });

 $(".course_radios_thr").click(function(){
      $( "#three" ).fadeIn( "slow", function() { });
 });
});
</script>


 <input type="radio" class="course_radios" name="div-fade" value="one" > first div <br/>
 <input type="radio" class="course_radios_tw"  name="div-fade2" value="two" >  second div<br/>
 <input type="radio" class="course_radios_thr"  name="div-fade3" value="three" >third div<br/>


<div id="one" style="display: none; border:1px solid red;"> div 1</div>
<br>
<div id="two" style="display: none; border:1px solid red;">div 2</div>
<br>
<div id="three" style="display: none; border:1px solid red;">div 3</div>

【讨论】：

【解决方案2】：

如果我的理解是正确的。试试这个

$('input[name=vh_course_radio]').on('change',function(){        
    if($(this).hasClass('course_radios')){$('div#one').fadeIn();}
    if($(this).hasClass('course_radios_tw')){$('div#two').fadeIn();}
    if($(this).hasClass('course_radios_thr')){$('div#three').fadeIn();}
});

【讨论】：