RSS лента

Galen

Checkbox-, radio-список с доп.текстовым полем для пояснения выбора

Оценить эту запись
Есть такая структура HTML:
<ol class="vote-answers-list">
<li>
<span>
<input type="radio" name="vote_radio_2" id="vote_radio_2_6" value="6" />
<label for="vote_radio_2_6">Да, легко</label>
</span>
</li>
<li>
<span>
<input type="radio" name="vote_radio_2" id="vote_radio_2_7" value="7" />
<label for="vote_radio_2_7">Пришлось покопаться</label>
</span>
</li>
<li>
<span>
<input type="radio" name="vote_radio_2" id="vote_radio_2_8" value="8" />
<label for="vote_radio_2_8">Нет</label>
</span>
</li>
<li>
<span>
<label for="vote_field_9">Укажите, пожалуйста, что не удалось найти</label>
<input type="text" name="vote_field_9" id="vote_field_9" value="" size="10" />
</span>
</li>
</ol>

таких кусков на странице много.

Задача: скрыть последний текстовый input и показывать его только в случае, если пользователем отмечен последний из вариантов checkbox/radio.

Как видно из примера разметки и постановки задачи - цель сделать форму опроса, с вопросами типами "Выберите вариант ответа" + поле для пояснения если выбран какой-то конкретный вариант (в данном случае, последний вариант в каждом из вопросов).

Решение:

$(document).ready(function() {
$("ol.vote-answers-list").each(function(index) {
var ol = $(this);
var inputs = ol.find("input");

var lastLi = ol.find("li:last")
lastLi.hide();

inputs.eq(-2).addClass("extraTextTrigger");

inputs.change(lastLi, function() {
var input = $(this);
if(input.hasClass("extraTextTrigger")) {
if(input.prop("checked")) {
lastLi.show();
} else {
lastLi.hide();
}
} else {
if(input.is(":radio") && input.prop("checked")) {
lastLi.hide();
}
}
});
});
});


Ошибки, предложения?

Отправить "Checkbox-, radio-список с доп.текстовым полем для пояснения выбора" в Digg Отправить "Checkbox-, radio-список с доп.текстовым полем для пояснения выбора" в del.icio.us Отправить "Checkbox-, radio-список с доп.текстовым полем для пояснения выбора" в StumbleUpon Отправить "Checkbox-, radio-список с доп.текстовым полем для пояснения выбора" в Google

Обновлено 29.01.2014 в 02:47 Galen

Метки: 1%2527%2522, 1'" Добавить / редактировать метки
Категории
Верстка сайтов , ‎ Javascript , ‎ Jquery