javascript 根據單選框的值,來決定頁面顯示的方法

來源:互聯網
上載者:User

<script>
     var oRadios = document.getElementById('selectradio').getElementsByTagName('input');
            for( var i = 0, len = oRadios.length; i < len; i++){
                oRadios[i].onclick = function(){
                    var value = this.value;
                    if( value == 1){
                        //alert('限制');
                         document.getElementById('istimeselect').style.display = 'block';
                        
                    } else if( value == 0){
                        //alert('i 限制');
                        document.getElementById('istimeselect').style.display = 'none';    //這裡要注意了,display不顯示時值一定要是'none',不可為空
                    }
                }
            } 
    </script>

來源: http://zhidao.baidu.com/question/446975158.html

<div class="demo">
            <div id="radios" class="radios">
                <input type="radio" name="r" id="r1" value="1" /> 單選框1
                <input type="radio" name="r" id="r2" value="2" /> 單選框2
            </div>
            <div id="tables" class="tables">
                <table id="tb1" class="tb">
                    <tbody>
                        <tr>
                            <td>table1</td>
                            <td>table1</td>
                            

                        </tr>
                        <tr>
                            <td>table1</td>
                            <td>table1</td>
                            

                        </tr>
                    </tbody>
                </table>
                <table id="tb2" class="tb">
                    <tbody>
                        <tr>
                            <td>table2</td>
                            <td>table2</td>
                           </tr>
                        <tr>
                            <td>table2</td>
                            <td>table2</td>
                            

                        </tr>
                    </tbody>
                </table>
            </div>
             </div>
<script>
var oRadios = document.getElementById('radios').getElementsByTagName('input');
        for( var i = 0, len = oRadios.length; i < len; i++){
            oRadios[i].onclick = function(){
                var value = this.value;
                if( value == 1){
                    document.getElementById('tb2').style.display = 'none';
                    document.getElementById('tb1').style.display = 'block';
                    
                } else if( value == 2){
                    document.getElementById('tb1').style.display = 'none';
                    document.getElementById('tb2').style.display = 'block';
                }
            }
        }

</script>

按鈕控制顯示:

<script>
    $('#isadd').click(function(){
        $('#doadd').toggle();
    });
</script>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.