web-dev-qa-db-ja.com

JavaScriptでRadioButtonListのSelectedValueを決定するにはどうすればよいですか？

データバインドされたRadioButtonListを含むASP.NETWebページがあります。デザイン時にレンダリングされるラジオボタンの数がわかりません。 JavaScriptを介してクライアントでSelectedValueを決定する必要があります。私はあまり運がなくて次のことを試しました：

var reasonCode = document.getElementById("RadioButtonList1");
var answer = reasonCode.SelectedValue;

（「answer」は「undefined」として返されます）JavaScriptの無知を許してください、しかし私は何が間違っているのですか？

前もって感謝します。

asp.netjavascriptradio-button
13
Bob OMalley

ASP.NETは、実際の無線入力の周りにテーブルと他のマークアップの束をレンダリングします。以下が機能するはずです：-

 var list = document.getElementById("radios"); //Client ID of the radiolist
 var inputs = list.getElementsByTagName("input");
 var selected;
 for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].checked) {
          selected = inputs[i];
          break;
       }
  }
  if (selected) {
       alert(selected.value);
  }
36
John Foster

RadioButtonListから選択した値を取得するには、これを試してください。

var selectedvalue = $('#<%= yourRadioButtonList.ClientID %> input:checked').val()
12
Zara

私は常にソースを表示します。各ラジオボタンアイテムには、操作できる一意のIDがあり、それらを繰り返し処理して、チェックされているものを特定します。

編集：例を見つけました。ラジオボタンリストrbSearchがあります。これは、ReportFilterと呼ばれるascxにあります。ビューソースで私は見る

ReportFilter1_rbSearch_0
ReportFilter1_rbSearch_1
ReportFilter1_rbSearch_2

したがって、document.getElementById（ "ReportFilter1_rbSearch_" + idx）をループするか、switchステートメントを使用して、どちらが.checked = trueであるかを確認できます。

3
MikeW

RadioButtonListはASP.NETサーバーコントロールです。これにより、JavaScriptを使用して操作しようとしているラジオボタンを含むHTMLがブラウザにレンダリングされます。

IE開発者ツールバー （Internet Explorerを好む場合）または Firebug （FireFoxを好む場合）のようなものを使用して、HTML出力を検査し、のIDを見つけることをお勧めします。 JavaScriptで操作するラジオボタン。

次に、JavaScriptのdocument.getElementByID("radioButtonID").checkedを使用して、ラジオボタンが選択されているかどうかを確認できます。

1
Richard Ev

この問題に最も簡単な解決策を追加したいと思います。

var reasons= document.getElementsByName("<%=RadioButtonList1.UniqueID%>");
var answer;
for (var j = 0; j < reasons.length; j++) {
    if (reason[j].checked) {
        answer = reason[j].value;
    }
}

UniqueIDは、コントロール内の入力の名前を指定するプロパティであるため、入力を非常に簡単に確認できます。

1
Giulio Caccin

ASP.NET RadioButtonListに相当するHTMLは、同じ名前属性を持つ<input type = "radio">のセットです（RadioButtonListのIDプロパティに基づく）。

GetElementsByNameを使用して、このラジオボタンのグループにアクセスできます。これは、インデックスからアクセスできるラジオボタンのコレクションです。

alert( document.getElementsByName('RadioButtonList1') [0].checked );
1
baretta
function CheckRadioListSelectedItem(name) {

    var radioButtons = document.getElementsByName(name);
    var Cells = radioButtons[0].cells.length;

    for (var x = 0; x < Cells; x++) {
        if (document.getElementsByName(name + '_' + x)[0].checked) {
            return x;
        }
    }

    return -1;
}
1
koby

'yes'と 'no'の2つの値のみを持つ 'RadioButtonListの場合、これを実行しました。

var chkval=document.getElemenById("rdnPosition_0")

ここで、rdnposition_0はyes ListItemのIDを参照します。フォームのソースコードを見て入手しました。

次に、chkval.checkedを実行して、値「はい」がチェックされているかどうかを確認しました。

1
Ashwin Kavale
reasonCode.options[reasonCode.selectedIndex].value
0
Alex Reitbort

ShowShouldWaitスクリプトを実行したかったのは、Page_ClientValidateはtrueでした。スクリプトの最後に、有効でない場合にpostbackイベントを防ぐために、bの値が返されます。

興味がある場合は、ShouldShowWait呼び出しを使用して、選択した出力タイプが「CSV」ではなく「HTML」の場合にのみ「お待ちください」divを表示します。

onclientclick="var isGood = Page_ClientValidate('vgTrxByCustomerNumber');if(isGood){ShouldShowWait('optTrxByCustomer');} return isGood"
0
Joe Schmucker

から ここ ：

if (RadioButtonList1.SelectedIndex > -1) 
{
    Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.Text;
}
0
Sergii

私は、JavascriptでRadioButtonListのSelectedValueを決定するさまざまな方法を試してみました。次に、WebページのHTMLを調べたところ、ASP.NETがRadioButtonListコントロールを単一列のHTMLテーブルとしてWebページにレンダリングしていることがわかりました。

<table id="rdolst" border="0">
  <tr>
    <td><input id="rdolst_0" type="radio" name="rdolst" value="Option 1" /><label for="rdolst_0">Option 1</label></td>
  </tr>
  <tr>
    <td><input id="rdolst_1" type="radio" name="rdolst" value="Option 2" /><label for="rdolst_1">Option 2</label></td>
  </tr>
</table>

Javascriptを介してRadioButtonListの個々のListItemにアクセスするには、関連する行のセルの子コントロール（Javascriptではノードと呼ばれます）内でそれを参照する必要があります。各ListItemは、その行の最初の（ゼロ）セルの最初の（ゼロ）要素としてレンダリングされます。

この例では、RadioButtonListをループして、SelectedValueを表示します。

var pos, rdolst;

for (pos = 0; pos < rdolst.rows.length; pos++) {
    if (rdolst.rows[pos].cells[0].childNodes[0].checked) {
        alert(rdolst.rows[pos].cells[0].childNodes[0].value);
        //^ Returns value of selected RadioButton
    }
}

RadioButtonListの最後の項目を選択するには、次のようにします。

rdolst.rows[rdolst.rows.length - 1].cells[0].childNodes[0].checked = true;

したがって、JavascriptでRadioButtonListを操作することは、通常のテーブルを操作することと非常によく似ています。私が言うように、私はそこにある他のほとんどの解決策を試しましたが、これが私のために働く唯一のものです。

0
Bondy

JavaScriptでドロップダウンの選択されたインデックスを確認するには：

function SaveQuestion() {
    var ddlQues = document.getElementById("<%= ddlQuestion.ClientID %>");
    var ddlSubQues = document.getElementById("<%=ddlSecondaryQuestion.ClientID%>");

    if (ddlQues.value != "" && ddlSubQues.value != "") {
        if (ddlQues.options[ddlQues.selectedIndex].index != 0 ||
            ddlSubQues.options[ddlSubQues.selectedIndex].index != 0) {
            return true;
        } else {
            return false;
        }
    } else {
        alert("Please select the Question or Sub Question.");
        return false;
    }
}
0
chenna