Question

我有一个基于数据库生成的单选按钮.. 这些是2个不同的单选按钮值..

<div class="form input">
    <?php 
        $so = mysql_query("select code from strength where year = $year"); 
        while($sso = mysql_fetch_array($so))
        {
    ?>
    <span>
        <input name="radio" class="radio" type="radio" value="<?php echo $sso['code']; ?>">
        <label class="choice"><?php echo $sso['code']; ?></label>
    </span>
    <?php
        }
    ?>
</div>
<div class="form_input">
    <?php 
        $soo = mysql_query("select code from opportunity where year = $year");
        while($sooo = mysql_fetch_array($soo))
        {
        ?>
    <span>
        <input name="radio1" class="radio" type="radio" value="<?php echo $sooo['code']; ?>">
        <label class="choice"><?php echo $sooo['code']; ?></label>
    </span>
    <?php
        }
    ?>
</div>

如果单击radio名称按钮，它将显示第1个div，如果单击radio1名称，则为第2个div，

我该怎么做？

这是我的剧本..

<script type="text/javascript">
    var show = document.getElementById('show');
    var show1 = document.getElementById('show1');

    function show()
    {
        show.style.display = 'block';
        show1.style.display = 'block';
    }

    var radio = document.getElementByName('radio');
    var radio1 = document.getElementByName('radio1');

    radio.addEventListener('change',show,false);
    radio1.addEventListener('change',show,false);
</script>

显然，这段代码没有完成任务..

这是我的完整代码..

http://pastebin.com/3S8049Xr

这是我要展示的div ..

<div id="show" class="form_grid_12" style="display:none;">
    <label class="field_title"></label>
     <div class="form_input">
      A
     </div>
</div>
<div id="show1" class="form_grid_12" style="display:none;">
    <label class="field_title"></label>
    <div class="form_input">
     B
    </div>
</div>

Answer 1

使用以下代码（jQuery）

jQuery('.radio').change(function(){

     if( jQuery('[name="radio"]').is(':checked') ){
        jQuery('#show').show();
     }
     if( jQuery('[name="radio1"]').is(':checked') ){
       jQuery('#show1').show();
     }

});

Answer 2

希望以下代码对您有用...

function showhide(obj)
{
    if(obj!=undefined && obj.id=='radio1')
document.getElementById('show1').style.display='block';
    else
        document.getElementById('show1').style.display='none';
}

html将是

<input id="radio1" type="radio" onchange='showhide(this);' name="test">Click Me1</input>
<input id="radio2" type="radio" onchange='showhide(this);' name="test" >Click Me2</input>

单击单选按钮时显示div

2 个答案: