Блог

Я использую этот плагин 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.

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

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

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

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

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

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

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

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

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

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

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

• С помощью плагина: http://jsfiddle.net/ambiguous/nGVkC /
• Без плагина: http://jsfiddle.net/ambiguous/UkPh8 /

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

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

Итак, вы могли бы сделать это так:

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

И некоторые демонстрации:

• С помощью плагина: http://jsfiddle.net/ambiguous/yAVHn /
• Без плагина: http://jsfiddle.net/ambiguous/vP3Du /