單擊複選框時顯示文本輸入 - 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/

Answer 2

你是用你.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>'); 
    }); 
});