jquery - 入力ボックスの追加と削除

Question

ボックスにチェックマークが付いているタイミングに基づいて、入力ボックスを追加および削除しようとしています。しかし、私はいくつかの問題を抱えているようです。私が確信していない1つのシンは、$ 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

$("#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>

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

これを実現する1つの方法は、http：//jsfiddle.net/eA32C/40/にあります。