簡體   English   中英

單擊單選按鈕時顯示div

[英]display div when radio button click

我有一個基於數據庫生成的單選按鈕。這些是單選按鈕的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格,如果radio1名被點擊時,它會在第二格,,

我怎樣才能做到這一點?

這是我的劇本

<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>

使用以下代碼(jQuery)

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

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

});

希望以下代碼對您有用...

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM