44

次のようなコードがあります...

<p><label>Do you have buffet facilities?</label>
  <asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server">
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList></p>
<div id="HasBuffet">
  <p><label>What is the capacity for the buffet?</label>
  <asp:RadioButtonList ID="radBuffetCapacity" runat="server">
    <asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem>
  </asp:RadioButtonList></p>
</div>

ラジオ リスト blBuffetMealFacilities:chk がクライアント側を変更し、jQuery の HasBuffet div でスライド ダウン機能を実行するときにイベントをキャプチャしたいと考えています。これを作成する最良の方法は何ですか。このページにはいくつかの同様のセクションがあり、ラジオ リストの「はい」「いいえ」の回答に応じて質問が表示されるようにしたいと考えています。

4

13 に答える 13

87

RadioButtonList1 のチェックされた値を取得する簡単な方法は次のとおりです。

$('#RadioButtonList1 input:checked').val()

ティムによる編集：

RadioButtonList の ClientIDであるRadioButtonList1必要があります

var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked");
于 2010-05-21T03:59:54.347 に答える
29

これ：

$('#rblDiv input').click(function(){
    alert($('#rblDiv input').index(this));
});

クリックされたラジオボタンのインデックスを取得します（テストされていないと思います）（RBLを#rblDivでラップする必要があることに注意してください

それを使用して、次のように対応する div を表示できます。

$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();

そうですか？

編集:別のアプローチは、rbl にクラス名を付けてから、次のように移動することです。

$('.rblClass').val();
于 2008-11-21T10:07:37.083 に答える
14

これは私のために働いた...

<asp:RadioButtonList runat="server" ID="Intent">
  <asp:ListItem Value="Confirm">Yes!</asp:ListItem>
  <asp:ListItem Value="Postpone">Not now</asp:ListItem>
  <asp:ListItem Value="Decline">Never!</asp:ListItem>
</asp:RadioButtonList>

ハンドラー：

$(document).ready(function () {
  $("#<%=Intent.ClientID%>").change(function(){
   var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();

   if(rbvalue == "Confirm"){
    alert("Woohoo, Thanks!");
   } else if (rbvalue == "Postpone"){
    alert("Well, I really hope it's soon");
   } else if (rbvalue == "Decline"){
    alert("Shucks!");
   } else {
    alert("How'd you get here? Who sent you?");
   }
  });
});

重要な部分： $（ "input [name ='<％= Intent.UniqueID％>']：radio：checked"）。val（）;

于 2011-10-05T19:58:31.213 に答える
6

私によると、それはうまくいくでしょう...

これで試してみてください

   var GetValue=$('#radiobuttonListId').find(":checked").val();

GetValue(Variable) に格納される Radiobuttonlist の値。

于 2012-05-03T06:42:49.207 に答える
4

ラジオ ボタンの代わりにラジオ ボタン リストを使用すると、一意の ID タグ name_0、name_1 などを作成できます。どれが選択されているかをテストする簡単な方法は、次のような CSS クラスを割り当てることです。

var deliveryService;
$('.deliveryservice input').each(function () {
    if (this.checked) {
        deliveryService = this.value
    }
于 2011-06-10T07:23:07.687 に答える
1

以下は、最終的に作成したコードです。最初に簡単な説明。ラジオボタンの質問リストを囲むdiv名には「q_」を使用しました。次に、任意のセクションに「s_」を付けました。次のコードは、質問をループしてチェックされた値を見つけ、関連するセクションでスライドアクションを実行します。

var shows_6 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Groom') {
    $("#s_6").slideDown();
  } else {
    $("#s_6").slideUp();
  }
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Bride') {
    $("#s_7").slideDown();
  } else {
    $("#s_7").slideUp();
  }
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
  $('#q_7 input:radio').click(shows_6);
  $('#q_7 input:radio').click(shows_7);
});

<div id="q_7" class='question '><label>Who are you?</label> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
  </p> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
  </p> 

</div>

以下により、質問を必須にすることができます...

<script type="text/javascript"> 
var mandatory_q_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected != '') {
    $("#q_7").removeClass('error');
  }
};
$(document).ready(function() {
    $('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script>

これが実際の表示/非表示レイヤーの例です

<div class="section" id="s_6"> 
    <h2>Attire</h2> 
    ...
</div>
于 2009-04-02T08:22:24.580 に答える
1

Try the below code:

<script type="text/javascript">
    $(document).ready(function () {

        $(".ratingButtons").buttonset();

    });
 </script>


<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" runat="server"
            AutoPostBack="True" DataSourceID="SqlDataSourceSizes"     DataTextField="ProdSize"
            CssClass="ratingButtons" DataValueField="_ProdSizeID" Font-Size="X-Small" 
            ForeColor="#666666">
</asp:RadioButtonList>
于 2012-07-03T17:13:36.480 に答える
0

私は価値を得るためにVinhの答えに投票しました。

対応するラベルを見つける必要がある場合は、次のコードを使用できます。

$('#ClientID' + ' input:checked').parent().find('label').text()

于 2011-07-15T14:44:30.807 に答える
0

簡単な解決策を見つけたので、これを試してください：

var Ocasiao = "";    
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });
于 2009-05-20T11:22:59.160 に答える
0

私のシナリオでは、私の JS は別のファイルにあったため、ClientID 応答出力の使用は役に立ちませんでした。驚くべきことに、解決策は CssClass を RadioButtonList に追加するのと同じくらい簡単でした。これはDevCurryで見つけました。

その解決策が消えた場合に備えて、ラジオボタンリストにクラスを追加してください

<asp:RadioButtonList id="rbl" runat="server" class="tbl">...

記事が指摘しているように、ラジオボタンリストがレンダリングされると、クラス「tbl」が周囲のテーブルに追加されます

<table id="rbl" class="tbl" border="0">
<tr>...

CSS クラスが追加されたため、css クラス セレクターに基づいて、テーブル内の input:radio 項目を参照するだけで済みます。

$(function () {
            var $radBtn = $("table.tbl input:radio");
            $radBtn.click(function () {
                var $radChecked = $(':radio:checked');
                alert($radChecked.val());
            });
        });

繰り返しますが、これにより、上記の「ClientID」の使用が回避されます。これは、私のシナリオでは面倒でした。お役に立てれば！

于 2014-01-21T17:16:35.053 に答える
0

Andrew Bullock ソリューションは問題なく動作します。私のものを見せて、警告を追加したかっただけです。

//よく働く

$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

// 警告 - Firefox では動作しますが、IE8 では動作しません。IE8 では動作しないことに気付くまで、これをしばらく使用していました。

$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});
于 2010-09-17T10:14:26.957 に答える