Как найти все переключатели внутри одной логической «группы» с помощью jQuery? - PullRequest
Новая
       51

Как найти все переключатели внутри одной логической «группы» с помощью jQuery?

2 голосов
/ 21 января 2012

Я пишу некоторый код, который выделяет все <input type=radio /> в «радиогруппе» при изменении любого из них.
В обработчике события радио "change", я использую следующий код, чтобы найти все другие подобные радио: 

radioHandler: function (event) {
    var element = $(this);
    var name = element.attr("name");
    // Find all radios in the same group:
    element.closest("form")
        .find("input[type=radio][name='" + name + "']")
        .each(function(){
            ... etc ...
        });
},

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

Например, при условии, что все радиостанции используют один и тот же name, следующее представляет 3 разные радиогруппы (и все браузеры ведут себя так): 

       o Radio A | o Radio B | o Radio C          (Group - no form)
<form> o Radio D | o Radio E | o Radio F </form>  (Group - form 1)
<form> o Radio G | o Radio H | o Radio I </form>  (Group - form 2)

Если у меня есть элемент, какой лучший способ найти ТОЛЬКО радиостанции, которые являются частью его "группы"?

Кроме того, для бонусных баллов ... что делать, если элемент не является частью текущего документа - т.е. он содержится в другом «отдельном» контексте? Текущее решение работает нормально (потому что element.closest(...) использует контекст элемента).

Ответы [ 3 ]

1 голос
/ 21 января 2012

Вместо выполнения .find в вашей форме, запустите его для всего документа: 

$("input[type=radio][name='" + name + "']").each(function() {
    ... etc ...
});

Если я не понимаю вопрос здесь?

РЕДАКТИРОВАТЬ Я не тестировал приведенный ниже код, но он может дать вам представление о том, как это сделать. 

radioHandler: function (event) {
    var element = $(this);
    var name = element.attr("name");
    // Find all radios in the same group:
    if (element.parents().find("form").length > 0) {
        name.closest("form").find("input[type=radio][name='" + name + "']")
        .each(function(){
            ... etc ...
        });
    } else {
        $("input[type=radio][name='" + name + "']").each(function() {
            if (!$(this).parents().find("form").length) {
                ... etc ...
            }
        }
    }
}
0 голосов
/ 20 января 2016

Если вы посмотрите на файл jquery-ui.js (моя версия 1.11.4), вы увидите, что внутренне они используют эту функцию, чтобы получить все переключатели, которые находятся в одной группе: 

radioGroup = function( radio ) {
 var name = radio.name,
  form = radio.form,
  radios = $( [] );
 if ( name ) {
  name = name.replace( /'/g, "\\'" );
  if ( form ) {
   radios = $( form ).find( "[name='" + name + "'][type=radio]" );
  } else {
   radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument )
    .filter(function() {
     return !this.form;
    });
  }
 }
 return radios;
};

Они используют его внутри обработчика события щелчка виджета ("ui.button"), когда тип кнопки имеет значение "radio", чтобы они могли удалить класс "ui-state-active" из всех других кнопок.

0 голосов
/ 21 января 2012

Думайте нестандартно. Добавьте нестандартный атрибут к тегам <input type="radio" />, которые находятся за пределами <form>. Например: 

<input type="radio" outsideform="true" />

Затем используйте селектор JQuery, как это: 

$('input[type=radio][outsideform=true]')

Вы также можете сделать что-то подобное с классом CSS. Класс не должен реализовывать какие-либо стили. 

<input type="radio" class="outsideform" />

... с ... 

$('input[type=radio].outsideform')
...