jquery - 添加和删​​除输入框

Question

我试图根据勾选框的时间添加和删除输入框。但是，我似乎遇到了一些问题。我不确定的一点是如何将 $this (div) 与其他属性联系起来。

HTML：

<form>
    Lifetime Secs <input id="sec" type="checkbox" name="sec" value="sec" /> <br />
    Lifetime KBytes <input id="kb" type="checkbox" name="kb" value="kb" />
</form>

JavaScript：

$("#input1, #input2").click(function() {
    if ($("this:checked").length) {
        $(this).after('<input type="text" name="input" id="inputbox" />');
    } else {
        $('this input').remove();
    }
});

JSFiddle：http: //jsfiddle.net/felix001/eA32C/22/

谢谢，

Answer 1

修复了几个问题..见下文，

$(function() {
    $('input:checkbox').change(function() {        
        if ($(this).is(':checked')) {
            $(this).after('<input type="text" name="input" id="inputbox"  />');
        } else {
            $(this).next('input').remove();
        }
    });
});

演示

Answer 2

可以在此处找到完成此操作的一种方法：http: //jsfiddle.net/eA32C/40/。

Answer 3

$(function() {
  $('input:checkbox').on('change', function() {
    if ( this.checked ) {
        $(this).after('<input type="text" name="input" id="inputbox"  />');
    } else {
        $(this).next('input').remove();
    }
  });
});

Answer 4

$("#sec,#kb").click(function() {
    $this = $(this);

if ( $this.attr('checked')) {

    $this.after('<input type="text" name="input" id="inputbox"  />');

} else {

    $('#inputbox').remove();

}
});

http://jsfiddle.net/eA32C/39/ ​</p>