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

Question

Я пытаюсь показать 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();
    }
});

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

РЕДАКТИРОВАТЬ

Сожалею.

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

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

Answer 1

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

$("#companyreg").length

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

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

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

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

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

Answer 2

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

<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(), Нет необходимости связывать один и тот же обработчик событий с обоими элементами.

---

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

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

Answer 3

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

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).