javascript - 单击复选框时显示文本输入 - Jquery

Question

我对这段代码有疑问，我不明白为什么它不起作用。 本质上，当单击复选框时，应显示同一 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>

Answer 1

您误用了 $(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/