Javascriptとasp.netを使用した表の可視性

Question

ウェブページに4つのラジオボタンと4つの表があります。 1つのラジオボタンをチェックすると、対応する表が表示され、他の表は不可視になります。同じ論理が4つのラジオボタンすべてに適用されます。これに必要なJavascriptを教えてください。

次のJavascriptを試しましたが、動作しません。

function showTable1(){ 
     if(opt1.checked) 
     { 
      tbl1.style.visibility="visible"; 
      tbl2.style.visibility="hidden"; 
     tbl3.style.visibility="hidden"; 
     tbl4.style.visibility="hidden"; 
      } 
     } 

これは私がこのメソッドを呼び出す方法です：

<asp:RadioButton ID="opt1" runat="server" Text="1" OnCheckedChanged="javascript:showTable1()" Checked="True" /> 

Answer 1

"visibility"を使用することは周囲のコンテンツに影響を与えないことを既に知らない場合。 "display"は、レンダリングフローから要素を削除して、元の要素が占有していた空間を越えた内容を満たすようにします。これは「この」onclick="javascript:showTable(this)

function showTable(tblNum){ 

var num_tables = 4; // expeted number of table to hide/show 


document.getElementById(tblNum.id).checked = "checked"; // set reffering element as checked 

for (var i = 1; i < num_tables + 1; i++) { 

if (document.getElementById((tblNum.id).slice(0, -1) + i).checked){ 

    //alert("Show table: " + (tblNum.id).slice(-1)); 


    document.getElementById("tbl" + (tblNum.id).slice(-1)).style.visibility = "visible"; 

}else{ 
//alert("Hide table: " + i); 

document.getElementById(("tbl" + i)).style.visibility="hidden" 
} 

} 
} 

にあなたにも、テーブル要素に上visibilityかdisplayのスタイル属性値を設定する必要がありますを追加する場合に役立ちます

を参照してください。

Answer 2

あなたのjavascriptを定義するには、この

function showTable1(){ 
    if(document.getElementById("opt1").checked) 
    { 
     tbl1.style.display=""; 
     tbl2.style.display="none"; 
     tbl3.style.display="none"; 
     tbl4.style.display="none"; 
     } 
    } 

Answer 3

使用OnClientClick方法試してください： - IDを割り当てる

<asp:RadioButton ID="opt1" runat="server" Text="1" OnClientClick="showTable1()" Checked="True" /> 



    function showTable1(){ 
        if (window.document.getElementById("opt1").checked == true){ 
         document.getElementById("tbl1").style.display=none;//for hide and use block to show 

        } 
        else if (window.document.getElementById("RadioBtNo").checked == true){ 
         //do something here 
        } 
       } 

Answer 4

を"tbl1"をあなたのテーブルにコードテーブルにIDを割り当てる後

var tbl1 = document.getElementById('tbl1'); 

この関数としての要素を選択するには、私がのdocument.getElementById（「OPT1」）はasp.net制御のために動作しないと思います

function showTable1(){ 
    var opt1 = document.getElementById('opt1'); // select option by using Id 
    var tbl1 = document.getElementById('tbl1'); 
    var tbl2 = document.getElementById('tbl2'); 
    var tbl3 = document.getElementById('tbl3'); 
    var tbl4 = document.getElementById('tbl4'); 

    if(opt1.checked) 
    { 
     tbl1.style.display="block"; 
     tbl2.style.display="none"; 
    tbl3.style.display="none"; 
    tbl4.style.display="none"; 
     } 
    } 

Answer 5

のようになります。 document.getelementbyid（ '<％＃opt1.ClientID％>'）のようなものを使う必要があるかもしれません。 asp.netコントロールではIDが変更されるためです。

問題があるかどうかを確認してください。

jqueryをセレクタでも使用できます。これは非常に良いサポートを提供します