Радио кнопки JQuery - PullRequest
Новая
       5

Радио кнопки JQuery

0 голосов
/ 20 февраля 2011

Я пытаюсь показать div с полями ввода выбора переключателя, Yes или No.

HTML 

<input id='companyreg' name='companyreg' class='radio' type='radio' value='yes' /> Yes
<input id='companyreg' name='companyreg' class='radio' type='radio' value='no' /> No

Jquery 

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyreg]:checked").val();
    if (value === "yes") {
        compfieldset.slideDown();
    }
    if (value != "yes") {
        compfieldset.slideUp();
    }
});

Пожалуйста, вы можете помочь мне, ребята.

EDIT

К сожалению.

Когда я нажимаю Нет, ничего не происходит.

Если я нажму на да, появится набор полей.

Ответы [ 3 ]

4 голосов
/ 20 февраля 2011

Идентификаторы должны быть уникальными. Вместо этого используйте классы: 

<input class='companyreg radio' name='companyreg' type='radio' value='yes' /> Yes
<input class='companyreg radio' name='companyreg' type='radio' value='no' /> No

и обработчик события может быть упрощен до: 

$(".companyreg").click(function(){
    if (this.value === "yes") {
        compfieldset.slideDown();
    }
    else {
        compfieldset.slideUp();
    }
});

Нет необходимости в :selected селекторе в вашем обработчике событий. В отличие от флажков, переключаемая кнопка является выбранной кнопкой.

В качестве альтернативы вы можете отказаться от class и id и использовать селектор атрибутов: 

$('input[name=companyreg]')

Вы также можете использовать делегирование события , используя .delegate(). Нет необходимости связывать один и тот же обработчик событий с обоими элементами.

Почему не работает с несколькими идентификаторами?

Идентификаторы должны быть уникальными, поведение извлечения элементов по идентификатору, если они имеют одинаковый идентификатор, не указано. Однако большинство браузеров возвращают элемент first , который появляется в DOM, поэтому обработчик событий связан только с переключателем yes.

4 голосов
/ 20 февраля 2011

В одном документе не может быть двух элементов с одинаковым идентификатором. Ваш селектор, #companyreg, находит первый элемент, а не второй. Если бы вы проверить 

$("#companyreg").length

вы бы увидели 1.

Вы могли бы, вероятно, обойти это, используя 

$( '[id="companyreg"]' )

хотя это не исправит ваш недействительный документ. Лучший способ - удалить идентификатор и добавить класс к этим элементам, а затем выбрать через этот класс.

Я не проверил остальную часть вашего кода, чтобы убедиться, что это единственная проблема, но я подозреваю, что это самая большая проблема.

1 голос
/ 20 февраля 2011

Ваш вопрос недостаточно конкретен, чтобы понять, в чем проблема, но я могу указать на некоторые проблемы: 

var compfieldset = $("#companyfieldset");
//if javascript hide comp field
compfieldset.hide();
$("#companyreg").click(function(){
    var value = $("input[@name=companyregyes]:checked").val();
    if (value == "yes") {
        compfieldset.slideDown();
    } else {
        compfieldset.slideUp();
    }
});
  1. Вам не нужно проверять === на «да» - здесь всегда будет печататься «да» в виде строки
  2. Второй if вам не нужен, если есть только два состояния, Да и Нет.

Кроме того, у вас есть что-то вроде ... 

<div id="companyfieldset">
 <input id='companyregyes' name='companyreg' class='radio' type='radio' value='yes' /> Yes
 <input id='companyregno' name='companyreg' class='radio' type='radio' value='no' /> No
</div>

Как и все атрибуты идентификатора должны быть уникальными, как в (см. Выше атрибут id).

...