通过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>