Пользовательские графические радиокнопки с jQuery каким-то образом ломают index()

Я использую этот подключаемый модуль customInput (с jQuery 1.6.2), чтобы настроить внешний вид моего Радио-кнопки.

Это прекрасно работает.

У меня сейчас проблема в том, что я просто пытаюсь получить номер index() выбранного переключателя, и он всегда возвращает 0. Есть шесть переключателей, и я ищу число от 0 до 5.

JavaScript:

$('input[name="amount"]').click(function() {
    var x = $(this).filter(':checked').index();
    var y = $(this).filter(':checked').val(); //<-- for troubleshooting
    alert(x + y);  //<-- for troubleshooting
});

Как ни странно, val() по-прежнему работает нормально и возвращает правильное значение. Таким образом, данные формы всегда получают правильное значение радио.

http://jsfiddle.net/sparky672/LdVGD/

HTML:

<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" checked="checked" /><label for="radio-1" title="">Option 1</label>
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label>
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label>
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label>
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
    <input type="radio" id="radio-6" name="amount" value="Option 6" /><label for="radio-6" title="">Option 6</label>
</fieldset>

Когда плагин customInput просто не используется, возвращается номер индекса.

http://jsfiddle.net/sparky672/LdVGD/1/

Побочный вопрос:

После отключения плагина index() возвращает 0, 2, 4, 6, 8 или 10. Это похоже на то, что само <label> считается частью index(), фактически удваивая количество. Почему это должно быть?

Я не могу удалить элементы <label>, так как работа плагина зависит от них.

Я просто хочу получить число от 0 до 5 в зависимости от того, установлен ли переключатель от 0 до 5.

Какие-либо предложения? Возможно, есть другой способ проверить, какой переключатель выбран?

Моя конечная цель? Чтобы просто изменить некоторые переменные в зависимости от того, какая кнопка выбрана.


javascript jquery radio-button label fieldset
person Sparky    schedule 16.10.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как вы заметили, ваш вызов index работает не совсем так, как вы ожидаете, когда вы не используете плагин. Из отличного руководства:

Если методу .index() не передается аргумент, возвращаемое значение представляет собой целое число, указывающее позицию первого элемента в объекте jQuery относительно его родственных элементов.

Вы получаете значения в два раза больше, чем, по вашему мнению, они должны быть, потому что элементы <label> также являются одноуровневыми, поэтому у вас есть пять элементов <input> и пять элементов <label> в списке одноуровневых элементов.

Когда вы активируете плагин, ваши переключатели завернуты в <div>, поэтому структура каждой кнопки выглядит следующим образом:

<div>
    <input type="radio">
    <label>
</div>

Это оставляет переключатель с одним братом, <label>, и index равным нулю.

У вас уже есть id атрибутов на ваших переключателях, так почему бы не использовать их для определения индекса? Что-то вроде этого:

var index = parseInt(this.id.replace(/radio-/, ''), 10) - 1;

Проверьте третье число в этих демонстрациях:

Или вы можете использовать форму элемента index:

Если .index() вызывается для коллекции элементов и передается элемент DOM или объект jQuery, .index() возвращает целое число, указывающее позицию переданного элемента относительно исходной коллекции.

Таким образом, вы можете сделать это следующим образом:

var i = $('input[name=amount]').index(this);

И несколько демо:

person mu is too short    schedule 16.10.2011
comment
Вы подтвердили мои подозрения, что label облажался с index. Почему-то я просто никогда не осознавал, что index() привязан к элементам в структуре DOM, а не к набору самих переключателей... вот как ошибочные вещи врезались в мою голову из действительно старых дней JavaScript (до ajax) когда вы не видели, как эти вещи динамически заворачивались в отдельные <div>. - person Sparky; 17.10.2011
comment
@ Sparky672: индекс привязывается к набору переключателей, если вы вызываете index для набора переключателей и даете ему один из переключателей в качестве аргумента (например, $('input[name=amount]').index(this)). - person mu is too short; 17.10.2011
comment
Да, очень устал... вы правы... это в основном то, что я ожидал изначально, индекс кнопок... var i = $('input[name=amount]').index(this);. БЛАГОДАРЮ ВАС! - person Sparky; 17.10.2011
comment
И подробный ответ... теперь я лучше знаю, как правильно использовать index() - person Sparky; 17.10.2011