Блог

У меня есть список переключателей с именем «ReportTypeId». Для каждой radio кнопки я хочу отображать оповещение с ее значением при нажатии.

Я написал следующий jQuery, который выводит все 5 переключателей в список с именем «ReportTypeId»:

 $("[name='ReportTypeId']").toArray().forEach(function(reportTypeId){
    reportTypeId.click(function(reportTypeId){
       alert(reportTypeId.value);
    });
});
  

Когда я устанавливаю точку останова и проверяю переменные во время загрузки, переменные выглядят так, как ожидалось. Однако, когда я нажимаю на переключатель после загрузки страницы, ничего не происходит. Что я делаю неправильно в приведенном выше jquery?

Вы должны использовать this для получения текущего элемента внутри вашей функции обратного вызова в .click() . Аргумент, переданный функции, на самом деле является объектом события click.

 $("[name='ReportTypeId']").toArray().forEach(function(reportTypeId){
    reportTypeId.click(function(event){
        alert(this.value);
    });
});
  

Вы можете значительно упростить свой код, просто вызвав .click() коллекцию jQuery. Прослушиватель событий будет автоматически прикреплен ко всем элементам коллекции.

 $("[name='ReportTypeId']").click(function(event){
    alert(this.value);
});
  

reportTypeId.value вероятно, не определено и, следовательно, предупреждение отображаться не будет.

Это не определено, потому что по умолчанию первым аргументом в функции обратного вызова события click является event объект, а не сам переключатель. Попробуйте оповещать this.value вместо reportTypeId.value .

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

 $("[name='ReportTypeId']").click(function(){
    alert(this.value);
});
  

используйте это внутри обратного вызова функции, и вам не придется использовать toArray()

Вы могли бы прикрепить событие click ко всем кнопкам одновременно, потому что у них одинаковое имя ReportTypeId , вам не нужно использовать .forEach() и цикл … затем, чтобы получить значение, используйте .val() :

 $("body").on('click', '[name='ReportTypeId']', function(){
     alert($(this).val());
});
  

Надеюсь, это поможет.

 $("body").on('click', '[name="ReportTypeId"]', function(){
     alert($(this).val());
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='ReportTypeId' value='radio_1' checked/> Radio 1
<br>
<input type='radio' name='ReportTypeId' value='radio_2'/> Radio 2
<br>
<input type='radio' name='ReportTypeId' value='radio_3'/> Radio 3
<br>
<input type='radio' name='ReportTypeId' value='radio_4'/> Radio 4