Affichage d'une entrée de texte lorsque vous cliquez sur une case - Jquery

Question

J'ai un problème avec ce code et je n'arrive pas à comprendre que le lactosérum ne fonctionne pas. Essentiellement, quand une case est cochée, le champ de texte dans le même li devrait apparaître.

Je ne veux pas de "cacher/afficher", car cela va remplir le tableau avec des champs supplémentaires, donc je cherche à le faire remplir la div avec une nouvelle entrée si la case est cochée.

Des idées où je rencontre un problème?

Voici mon 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> 

Voici mon 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

Vous utilisez abusivement $(selector, context), l'élément .showOrder n'est pas dans le contexte de l'élément qui a été cliqué.

$('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

que vous utilisiez correctement votre .input_control comme contexte pour localiser votre .showOrder, j'ai changé votre code pour utiliser votre li.practice comme contexte, alors faites comme suit:

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>'); 
    }); 
});