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).开发者_StackOverflow中文版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?
$("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();
}
});
$("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"){
// remove html
}
});
that said try to think about better ways you could do this... this seems a little bit "round the houses" as it were. :p I'm sure there must be easier ways.
精彩评论