Как включить отключенные радиокнопки в HTML и JavaScript

Код, предназначенный для управления состоянием радиокнопок в зависимости от выбора в выпадающем списке, демонстрирует корректную работу в Internet Explorer, но сталкивается с проблемами в Firefox и Safari, особенно когда пользователи переключаются между опциями с помощью клавиатуры. В таких случаях радиокнопки не обновляют свое состояние (включены или отключены) до тех пор, пока пользователь не щелкнет в другом месте страницы. Для решения этой проблемы предлагается добавить обработчик события keyup к выпадающему списку, что позволит обновлять состояние радиокнопок при использовании клавиатуры. Также рекомендуется использовать метод document.getElementById для доступа к элементам формы, что улучшит совместимость кода с различными браузерами, так как текущий подход может приводить к ошибкам. В дополнение к техническим рекомендациям, упоминаются книги по JavaScript и DOM, которые могут помочь разработчикам лучше понять кроссбраузерные скрипты, а также предлагается рассмотреть использование библиотек AJAX, которые могут значительно упростить работу с DOM и абстрагировать сложности, связанные с кроссбраузерной совместимостью.

Описание проблемы с радио-кнопками

Предоставленный код предназначен для включения или отключения радио-кнопок в зависимости от выбора в выпадающем меню. Он хорошо работает в Internet Explorer, но сталкивается с проблемами в Firefox и Safari, особенно когда пользователь не взаимодействует с выпадающим меню с помощью мыши. Радио-кнопки не обновляют свое состояние (включены/отключены) до тех пор, пока пользователь не кликнет в другом месте на странице.

Ключевые моменты:

Функциональность: Функция SetLocationOptions отключает или включает радио-кнопки в зависимости от выбранного варианта в выпадающем меню.

Совместимость с браузерами: Код работает в IE, но не работает в Firefox и Safari, особенно при использовании навигации с клавиатуры.

Обработка событий: Для улучшения совместимости предлагается добавить событие keyup к выпадающему меню, чтобы гарантировать, что радио-кнопки обновляются правильно при навигации с клавиатуры.

Доступ к DOM: В оригинальном коде используется нестандартный способ доступа к элементам формы. Рекомендуется использовать document.getElementById для лучшей совместимости между браузерами.

Улучшения кода: Предлагается использовать идентификаторы для элементов формы и правильно ссылаться на них в JavaScript.

Предложенные изменения кода:

1. Измените элемент формы, добавив идентификатор:

<form name="frm" id="f" ...>

2. Обновите JavaScript, чтобы получить доступ к форме с помощью getElementById:

var frmTemp = document.getElementById('f');

Вопрос

Следующий код отлично работает в IE, но не в FF или Safari. Я не могу понять, почему. Код должен отключать радиокнопки, если вы выбираете опцию «Отключить 2 радиокнопки». Он должен включать радиокнопки, если вы выбираете опцию «Включить обе радиокнопки». Оба они работают...

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

Если у кого-то есть время/любопытство/чувство помощи, пожалуйста, вставьте код ниже в html-страницу и загрузите ее в браузере. Он отлично работает в IE, но проблема проявляется в FF (3 в моем случае) и Safari, все на Windows XP.

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  if (selTemp.selectedIndex >= 0) {
    var myOpt = selTemp.options[selTemp.selectedIndex];
    if (myOpt.attributes[0].nodeValue == '1') {
      frmTemp.transfer_to[0].disabled = true;
      frmTemp.transfer_to[1].disabled = true;
      frmTemp.transfer_to[2].checked = true;
    } else {
      frmTemp.transfer_to[0].disabled = false;
      frmTemp.transfer_to[1].disabled = false;
    }
  }
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="" />Choose One
    <option value="58" user_is_tsm="0" />Enable both radio buttons
    <option value="157" user_is_tsm="1" />Disable 2 radio buttons
  </select>
  <br /><br />
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium   
  <input type="radio" name="transfer_to" value="fund_amount2" />Other   
  <input type="radio" name="transfer_to" value="both" CHECKED />Both
  <br /><br />
  <input type="button" class="buttonStyle" value="Submit Request" />
</form>

Эм, это работает в IE10 и FF.

3 ответа

Чтобы заставить FF имитировать поведение IE при использовании клавиатуры, вы можете использовать событие keyup в поле выбора. В вашем примере (я не фанат присоединения обработчиков событий таким образом, но это уже другая тема) это будет выглядеть так:

<select name="user" id="selUser" onchange="javascript:SetLocationOptions()" onkeyup="javascript:SetLocationOptions()">

Ну, у IE несколько нестандартная объектная модель; то, что вы делаете, не должно работать, но вам это сходит с рук, потому что IE к вам хорошо относится. В Firefox и Safari document.frm в вашем коде оценивается как undefined.

Вам необходимо использовать значения идентификаторов в элементах формы и использовать document.getElementById('whatever'), чтобы вернуть ссылку на них вместо ссылки на несуществующие свойства объекта документа.

Итак, это работает немного лучше и может дать то, что вам нужно:

Line 27: <form name="frm" id="f" ...
Line 6: var frmTemp = document.getElementById('f');

Но если вы хотите узнать больше о том, как правильно действовать, вам, возможно, стоит прочитать эту замечательную книгу: «Скриптинг DOM» Джереми Кейта.

И раз уж мы заговорили об этом, книга «Пуленепробиваемый Ajax» того же автора также заслуживает места на вашей книжной полке, как и «JavaScript: The Good Parts» Дуга Крокфорда.

Почему бы не воспользоваться одной из библиотек скриптов AJAX? Они абстрагируют большую часть черной магии кроссбраузерных скриптов DOM и значительно упрощают жизнь.

Выводы

Проблемы совместимости: Код, работающий в Internet Explorer, может не функционировать должным образом в других браузерах, таких как Firefox и Safari, особенно при использовании клавиатуры для навигации.

Необходимость обновления состояния: Радио-кнопки не обновляют свое состояние (включены/отключены) до тех пор, пока пользователь не кликнет в другом месте на странице, что может привести к путанице у пользователей.

Улучшение кросс-браузерной совместимости: Рекомендуется добавление события keyup к выпадающему меню, чтобы обеспечить немедленное обновление состояния радио-кнопок при навигации с клавиатуры.

Правильный доступ к элементам формы: Использование document.getElementById для доступа к элементам формы вместо нестандартных свойств улучшит совместимость кода между различными браузерами.

Использование идентификаторов: Присвоение идентификаторов элементам формы обеспечит более надежное обращение к ним в JavaScript, что упростит поддержку и развитие кода.

Есть несколько ключевых выводов относительно совместимости веб-кода в различных браузерах. Отмечается, что код, работающий в Internet Explorer, может не функционировать должным образом в Firefox и Safari, особенно при навигации с клавиатуры, что приводит к путанице, так как состояние радио-кнопок не обновляется до тех пор, пока пользователь не кликнет в другом месте на странице. Для улучшения кросс-браузерной совместимости рекомендуется добавить событие keyup к выпадающему меню для немедленного обновления состояния и использовать document.getElementById для доступа к элементам формы вместо полагания на нестандартные свойства. Кроме того, присвоение идентификаторов элементам формы обеспечит более надежное обращение к ним в JavaScript, что упростит поддержку кода и улучшит пользовательский опыт.

Разница в стиле закрытия - JavaScript

В чем разница в стиле закрытия? В JavaScript есть два популярных стиля замыкания. Первый я называю анонимным конструктором: new function() { var code... } и встроенная выполняемая функция: (function() { var code... })(); есть ли разница в поведении между этими двумя? Один «лучше» другого? В обоих случаях функция будет выполнена, единственное реальное различие заключается в том, каким может быть возвращаемое значение выражения и каким будет значение «this» внутри функции. В основном поведение new expression Фактически эквивалентно var tempObject = {}; var result = expression.call(tempObject); if (result is not an object) result = tempObject; Хотя, конечно, tempObject и result — это временные значения, которые вы никогда не увидите (это детали реализации в интерпретаторе), и не существует механизма JS для проверки «не является объектом». В общем случае метод «new function() { .. }» будет медленнее из-за необходимости создания объекта this для…

Подробнее »

Получение текста из выпадающего списка

Это возвращает значение того, что выбрано в моем выпадающем меню. document.getElementById('newSkill').value Однако я не могу найти, какое свойство использовать для текста, который в данный момент отображается в раскрывающемся меню. Я попробовал "text", но это не дало ответа, кто-нибудь здесь знает? Для тех, кто не уверен, вот HTML-код раскрывающегося списка. <select name="newSkill" id="newSkill"> <option value="1">A skill</option> <option value="2">Another skill</option> <option value="3">Yet another skill</option> </select> На…

Подробнее »

JavaScript должен запускаться при отображении ModalPopupExtender

ASP _ NET AJAX ModalPopupExtender имеет свойства OnCancelScript и OnOkScript, но, похоже, не имеет свойства OnShowScript. Я хотел бы указать функцию javascript для запуска каждый раз, когда отображается всплывающее окно. В прошлых ситуациях я устанавливал фиктивный элемент управления TargetControlID и предоставлял свой собственный элемент управления, который сначала выполняет некоторый код JS, а затем использует методы JS для отображения всплывающего окна. Но в этом…

Подробнее »