Отображение ввода текста при нажатии флажка - Jquery

У меня проблема с этим кодом, и я не могу понять, почему он не работает. По сути, при установке флажка должно отображаться текстовое поле в том же li.

Я не хочу «скрывать/показывать», так как это заполнит массив дополнительными полями, поэтому я смотрю на то, чтобы заполнить div новым вводом, если флажок установлен.

Любые идеи, где я сталкиваюсь с проблемой?

Вот мой html:

<ul>
    <li class="practice"><label><input type="checkbox" value="Practice 1" class="input_control" name="practice_areas[id][name]" /> Practice 1</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 2" class="input_control" name="practice_areas[id][name]"  /> Practice 2</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 3" class="input_control" name="practice_areas[id][name]"  /> Practice 3</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 4" class="input_control" name="practice_areas[id][name]"  /> Practice 4</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 5" class="input_control" name="practice_areas[id][name]"  /> Practice 5</label> <div class="showOrder"></div></li>                 
</ul>

Вот мой Javascript:

<script>
jQuery('li.practice').each(function() {
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', this).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});

</script>

javascript jquery each
person Troy    schedule 28.03.2013    source источник
comment
заполнить массив дополнительными полями, что вы подразумеваете под этим? Какой массив?   -  person Rick Viscomi    schedule 29.03.2013
comment
Привет, Рик, если ты заметил, что текстовые поля у меня настроены как массив. Если элемент пуст, он все равно будет добавлять элементы в массив. Надеюсь, это имеет смысл.   -  person Troy    schedule 29.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы неправильно используете $(selector, context), элемент .showOrder не находится в контексте выбранного элемента.

$('li.practice .input_control').change(function(){
    var $target = $(this).closest('li').find('.showOrder');
    if (this.checked) {
        $target.html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    } else {
        $target.empty();
    }
});

http://jsfiddle.net/Qh6Fq/1/

person undefined    schedule 28.03.2013
comment
Спасибо, undefined :) это работает, потому что он удаляет его, а флажок снимается. - person Troy; 29.03.2013

arrow_upward
2
arrow_downward

Вы неправильно использовали свой .input_control в качестве контекста для поиска вашего .showOrder, я изменил ваш код, чтобы использовать ваш li.practice в качестве контекста, поэтому сделайте следующее:

jQuery('li.practice').each(function() {
    var li = this;
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', li).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});
person Nelson    schedule 28.03.2013
comment
Спасибо, Нельсон, это сработало, но Undefined также удалил его. - person Troy; 29.03.2013