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

您错误地使用.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>');
    });
});

Answer 2

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

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

2 个答案: