Question

So I am adding text and textbox to a page dynamically if a checkbox is selected. However, the dynamic part is that the code behind is creating a CheckBoxList and appending text from a Code table to each checkbox. Therefore, I am looking for any checkbox with the ID that contains “chkCheckBox”. From there, I can check if the next to the checkbox is “Other” and if so insert the line of HTML in the last line below.

    $("input:checkbox[id*=chkSomeCheckBox]").click(function() {
        if ($(this).next().html() == "Other") {
            $("<span> : </span><input type='textbox'>").insertAfter($(this).next());
        }
    });

PROBLEM: The problem I am having is obviously if they uncheck the box, it appends ANOTHER textbox next to the first one, and this continues.

Help: I am having problems figuring out how to check if they are putting a check in the checkbox and only place the HTML if true. Secondly, if they uncheck the checkbox that meets the condition of ( == “Other) then remove the textbox I dynamically placed.

I figure its going to use the JQuery “remove()” event, but I am not sure how to tie in (this) with the :checked selector.

Any suggestions?

Answer 1

$("input:checkbox[id*=chkSomeCheckBox]").click(function() {
        if ($(this).next().html() == "Other" && $(this).is(':checked')) {
            $("<span> : </span><input type='textbox'>").insertAfter($(this).next());
        }
        else if($(this).next().html() == "Other"){
           $(this).next().empty();
        }
});