显示基于复选框状态的输入框由jquery追加

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>