Блог

Я хочу получать значение проверенного радиовхода при каждом событии размытия, щелчка или фокусировки радиовходов.

 function getCheckedVal(){
    var checked = $('#education_number input:radio:checked')
    console.log(checked.val());
};
  

Это не работает:

 window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i  ){
        radio[i].addEventListener('blur', function(){getCheckedVal()});
        };
    }
  

И это вызывает исключение:

 window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i  ){
        radio[i].bind('blur', getCheckedVal());
        };
    }
  

Ошибка неперехваченного типа: объект #HTMLInputElement не имеет метода ‘bind’

Как это сделать?

Во втором примере вы вызываете getCheckedVal , а затем передаете возвращаемое значение в bind . Вы не хотите, чтобы () они после getCheckedVal :

 window.onload = function(){
    var radio = $('#education_number input:radio');
    for(var i=0; i<radio.length; i  ){
        $(radio[i]).bind('blur', getCheckedVal);
    }
}
  

(Примечание, которое я добавил $(...) radio[i] , потому radio[i] что это необработанный элемент DOM, а не объект jQuery.)

Но вы можете значительно упростить этот код:

 window.onload = function(){
    $('#education_number input:radio').blur(getCheckedVal);
}
  

jQuery очень основан на множествах. Вы можете работать со всем согласованным набором элементов, а не перебирать набор самостоятельно.

Однако следует учитывать две вещи:

• Вам действительно нужна только эта информация о размытии? Не включен change , например?
• Вы действительно хотите дождаться window#load события, чтобы подключить ваши обработчики событий? Это очень поздно в процессе загрузки страницы, после завершения загрузки всех ваших изображений и тому подобного. Вместо того, чтобы использовать window#load , рассмотрите возможность либо размещения вашего скрипта в конце, непосредственно перед закрывающим </body> тегом, либо использования ready функции jQuery.

bind это метод jQuery, но все, что у вас есть на данном этапе, это HTMLInputElement — к счастью, вы можете передать элемент в jQuery и получить доступ ко всем его функциям:

Изменить:

 radio[i].bind('blur', getCheckedVal());
  

Для

 $(radio[i]).bind('blur', getCheckedVal);
  

Вам также необходимо удалить круглые скобки из getCheckedVal — передача getCheckedVal() в bind вызовет немедленную оценку функции, и только возвращаемое значение будет привязано к вашему событию. Вместо этого вам нужно передать ссылку на функцию bind .

Это просто:

 $('#education_number input:radio').bind('blur', getCheckedVal);
  

Обратите внимание на пропущенное () после getCheckedVal . Вы должны передавать ссылку на функцию, а не вызывать функцию.

Я рекомендую прочитать одно из руководств по jQuery, чтобы узнать об основах.

Одним из больших преимуществ jQuery является то, что он позволяет легко выполнять действия с коллекцией HTML-элементов. $('selector') всегда возвращает объект jQuery, чтобы вы могли воспользоваться этим. Если бы у вас был чистый массив элементов DOM, тогда да, вам пришлось бы перебирать их и привязывать обработчик событий по отдельности.