2011年5月10日火曜日

ASP.NET jQueryでラジオボタンリストの選択されている値を取得

ASP.NETのラジオボタンリストのコントロールは非常に扱いづらい形でHTML出力されるため、JavaScript側でその値を取得するには非常に骨が折れる。

ASP.NET上
<asp:RadioButtonList ID="rbltest" CssClass="xxxx" >

実際のHTML

<span id="rbltest" class="xxxx">
  <input id="rbltest_0" type="radio" name="(配置場所で変化?)$rbltest" value="1"     /><label for="rbltest_0">①<label>
  <input id="rbltest_1" type="radio" name="(配置場所で変化?)$rbltest" value="2" /><label for="rbltest_1">②<label>
  <input id="rbltest_2" type="radio" name="(配置場所で変化?)$rbltest" value="3" /><label for="rbltest_2">③<label>
</span>

→SPANタグで囲われ、しかもCssはそのSAPNにしかつかない。idは個別に設定され、nameも不定になるようなので、チェックされているものの値の取得が非常に困難(場合によってはnameは使えるかも)。


jQueryでの値の取得
$("span[id='rbltest'] > :input[type='radio']").each(function () {
                if ($(this).attr("checked") == true) {
                    alert($(this).val(););
                }
            });

→SPANをまず検索し、その子要素であるラジオボタンについて、チェックがついているものを取得する

function化したものを追記・・・

function getCheckedRadioButtonList(id){
 var val = "";
 $("span[id='" + id + "'] > :input[type='radio']").each(function () {
  if ($(this).attr("checked") == true) {
      val = $(this).val();
  }
 });
 return val;
}

-------------------------------------------------------------
追記
実はRadioButtonListはVerticalとHorizontalで出力される方法が異なり、HorizontalはTableタグ
で囲まれるため上記方法では対応できない。
そのため、最終的には以下のようにした


function getCheckedRadioButtonList(id) {
    var val = "";
    $("#" + id).find(":radio").each(function () {
        if ($(this).attr("checked") == true) {
            val = $(this).val();
        }
    });
    return val;
}

0 件のコメント:

コメントを投稿