Чтение выбранного значения из asp:RadioButtonList с использованием jQuery

У меня есть код, похожий на следующий...

<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 меняет клиентскую сторону и выполняет функцию слайда вниз в div HasBuffet из jQuery. Как лучше всего это сделать, принимая во внимание, что на странице есть несколько похожих разделов, где я хочу, чтобы вопросы раскрывались в зависимости от ответа «да» в списке радио.


person digiguru    schedule 21.11.2008    source источник
comment
По юзабилити: Наверное, стоит подумать о текстах listitem. Место, например, с 40 местами, вероятно, выберет до 30, потому что не может обслуживать до 50, но значения в вашем списке будут указывать на то, что до 50 было правильным выбором....   -  person Marcel    schedule 04.02.2013


Ответы (13)


это:

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

даст вам индекс переключателя, который был нажат (я думаю, непроверенный) (обратите внимание, что вам пришлось обернуть свой RBL в #rblDiv

затем вы можете использовать это для отображения соответствующего div следующим образом:

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

Это то, что вы имели в виду?

Изменить. Другой подход - дать rbl имя класса, а затем перейти:

$('.rblClass').val();
person Andrew Bullock    schedule 21.11.2008
comment
Хорошая работа - как мне получить выбранное значение, а не индекс ввода? - person digiguru; 21.11.2008
comment
Из-за глупого способа, которым WebForms создает элементы управления, я использовал jQuery для назначения классов входам/флажкам, а затем использовал $('.classname').val() для получения текущего выбранного значения. - person Rich Reuter; 31.07.2009
comment
вы всегда можете изменить clientidmode на статический, тогда ваш идентификатор останется прежним - person box86rowh; 15.12.2012

Простой способ получить проверенное значение RadioButtonList1:

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

Редактировать Тим:

где RadioButtonList1 должен быть ClientID RadioButtonList

var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked"); 
person Vinh    schedule 21.05.2010
comment
я попробовал это, но не работает, но я использую те же критерии поиска по-другому, и это работает: alert($('#‹%= RadioButtonList1.ClientID %›').find('input:checked').val()); - person Amr Badawy; 30.05.2010
comment
Да, мы должны сначала получить ClientID. И стиль jQuery: var clientId = '‹%= RadioButtonList1.ClientId%›'; $('#'+clientId+' input:checked').val() - person Vinh; 25.11.2010

Это сработало для меня...

<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();

person Community    schedule 05.10.2011

По моему все будет нормально...

Просто попробуйте с этим

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

Значение Radiobuttonlist для сохранения в GetValue(Variable).

person azarudeen    schedule 03.05.2012

Список радиокнопок вместо радиокнопки создает уникальные теги идентификаторов name_0, name_1 и т. д. Простой способ проверить, какой из них выбран, — это назначить класс css, например

var deliveryService;
$('.deliveryservice input').each(function () {
    if (this.checked) {
        deliveryService = this.value
    }
person Stephen Montgomery    schedule 10.06.2011

Попробуй это:

$("input[name='<%=RadioButtonList1.UniqueID %>']:checked").val()
person Vin05    schedule 02.10.2014

Ниже приведен код, который мы в конечном итоге создали. Сначала краткое объяснение. Мы использовали «q_» для имени div, обернутого вокруг списка вопросов переключателя. Тогда у нас было "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>
person digiguru    schedule 02.04.2009

Попробуйте следующий код:

<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>
person Shah Bdr    schedule 03.07.2012
comment
Это доступно, только если вы используете пользовательский интерфейс jQuery....jqueryui.com/demos/button/#radio - person digiguru; 04.07.2012

Почему так сложно?

$('#id:checked').val();

Будет работать нормально!

person Predders    schedule 27.01.2014

Решение Эндрю Баллока отлично работает, я просто хотел показать вам свое и добавить предупреждение.

//Работает отлично

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

// Предупреждение - работает в firefox, но не в IE8.. использовал это некоторое время, прежде чем заметил, что это не работает в IE8... привык, что все работает во всех браузерах с jQuery при работе в одном.

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

Я проголосовал за ответ Винха, чтобы получить значение.

Если вам нужно найти соответствующую метку, вы можете использовать этот код:

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

person RWL01    schedule 15.07.2011

Для моего сценария мой JS был в отдельном файле, поэтому использование вывода ответа ClientID не способствовало. Удивительно, но решение оказалось таким же простым, как добавление CssClass в RadioButtonList, о чем я узнал на Девкарри

На всякий случай, если это решение исчезнет, ​​​​добавьте класс в список переключателей.

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

Как указано в статье, при отображении списка переключателей класс «tbl» добавляется к окружающей таблице.

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

Теперь из-за добавленного класса CSS вы можете просто ссылаться на элементы input:radio в вашей таблице на основе селектора класса css.

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

Опять же, это позволяет избежать использования упомянутого выше «ClientID», который я нашел беспорядочным для моего сценария. Надеюсь это поможет!

person ewitkows    schedule 21.01.2014

Я нашел простое решение, попробуйте следующее:

var Ocasiao = "";    
$('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });
person Felipe Pessoto    schedule 20.05.2009
comment
это ужасная идея, обращаться к rbl по идентификатору клиента. У вас нет контроля над идентификатором. Что произойдет, если в будущем вы вложите рубль в панель? Ваш идентификатор будет другим, и ваш js сломается. потерпеть поражение. - person Andrew Bullock; 31.07.2009
comment
Вы можете сгенерировать JS: ‹%=blnBuffetMealFacilities.ClientId%› - person Felipe Pessoto; 31.07.2009