ASP.NET　ラジオボタンリストの値をjavascriptで取得する方法

seki (2010年6月22日 08:58)
流通システム部

今回は、ASP.NETにてラジオボタンリストの値をjavascriptで取得する方法をご紹介します。

値を取得する上で重要なのは、javascriptのElementオブジェクトですが、
Elementオブジェクトを取得するには以下の方法があります。

　"getElementById"
　　　ドキュメント内から、特定の id が設定してあるエレメントを探します。html4 の仕様上、
　　　id はドキュメント内でユニークであることから、このメソッドは、単一のエレメントを
　　　返します。

　"getElementsByName"
　　　ドキュメント内から、特定の name が設定してあるエレメントを探します。
　　　html4 の仕様上、複数のタグに同一の name が設定できることから、
　　　このメソッドは、複数のエレメントを含むリスト（配列）を返します。

　"getElementsByTagName"
　　　ドキュメント内から、特定の名前のタグ探します。このメソッドは、
　　　複数のエレメントを含むリスト（配列）を返します。

以下、簡単ではありますがサンプルコードになります。

上記のようなhtmlドキュメントに対し、下記のコードを実行すると、
itemには、2行目3列目のinputエレメントが格納されます。



var item = document.getElementById('row1column2');

同様に、下記のコードを実行すると、itemsには、2列目のinputエレメントが4つ格納されます。



var items = document.getElementsByName('column1');

下記のコードの場合は、itemsには、全てのinputエレメントが格納されます。



var items = document.getElementsByTagName('input');

上記は、HTMLのコントロールの値を取得する方法です。
ここからは、ASP.NETのラジオボタンリストの値を取得する方法を紹介します。

ASP.NETでは、aspxファイルから自動的にHTMLを作成する時、
下記のようにラジオボタンリストのIDが自動的に採番されます。


    ラジオボタン
    
        
        申請中
        承認済
        差戻

そのため、getElementByIdではなく、getElementsByNameを使って、値を取得します。

例えば、aspxファイルに、ID="crblRadio"のラジオボタンリストがあり、
その値が1の場合は、更新ボタンを使用可能にし、値が1以外の場合は使用不可にする処理を以下に記述します。

function setButtonEnabled() {
    var crblRadio
    var bFlg
    
    //コントロールオブジェクトを取得
    crblRadio = document.getElementsByName('<%=Me.crblRadio.UniqueID %>');
    bFlg = true;
    
    for (i = 0; i < crblRadio.length; i++) {
        //チェックされた項目のvalueは1の場合
        if (crblRadio[i].checked && crblRadio[i].value == '1') {
            bFlg = false;
        }
    }
    //更新ボタンを使用可能かどうかを設定する
    if (bFlg) {
        document.getElementById('<%=Me.cbtnUpdate.UniqueID %>').disabled = true;
    } else {
        document.getElementById('<%=Me.cbtnUpdate.UniqueID %>').disabled = false;
    }
}

以上、ASP.NETのラジオボタンリストの値をjavascriptで取得する際には、
getElementByIdではなく、getElementsByNameを使って、値を取得することをお勧めします。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

ASP.NET　ラジオボタンリストの値をjavascriptで取得する方法

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。