Question

Im trying to add and remove an input box based on when a box is ticked.
However I seem to be having a few issues. One thin that Im unsure of is how I can link the $this (div) with additional attributes.

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/

Thanks,

Answer 1

Couple of issues fixed.. See below,

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

DEMO