通过jquery append显示基于复选框状态的输入框

Question

我想隐藏并根据复选框状态显示输入框。在我的例子中，两者都被jquery附加如下：

$container.append('<li><label><input type="checkbox" style="float:left"</label>
<input type="text" name="couple_answers['+index+']" id="couple_answers_'+index+'" maxlength="500" class="input-item form-control text-field"></li>');

请建议我任何可能性。

Answer 1

$(function(){
     $('#chk').on('change',function(){
         if(this.checked) {
             $('#res').html("<input id='inp' type='text' />");
         }else{
             $('#inp').hide();
         }
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="checkbox" id="chk" checked/> Click Here    
    <br/><br/>
    <div id="res"></div>
</form>