.hide() and .show() with .append()
Posted: Wed Jun 30, 2010 5:12 am
I am using 2 divs inside a form:
<div id=one>consists of a text field and a checkbox</div>
<div id=two>consists of another text field</div>
<div id=two> is always hidden. I am also using a button at the end to repeat (append) these 2 divs.
I want <div id=two> to show only when the checkbox in <div id=one> is checked and hide when the checkbox in <div id=one> is unchecked. The textfield and check names are array.
Is this possible?
<div id=one>consists of a text field and a checkbox</div>
<div id=two>consists of another text field</div>
<div id=two> is always hidden. I am also using a button at the end to repeat (append) these 2 divs.
I want <div id=two> to show only when the checkbox in <div id=one> is checked and hide when the checkbox in <div id=one> is unchecked. The textfield and check names are array.
Is this possible?
Code: Select all
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#addTestAppend").click(function() {
$("#testAppend").append(
"<div id=one>"
+"<input type=\"text\" name=\"name[]\" /><br />"
+"<input type=\"checkbox\" name=\"needDivTwo[]\" id=\"needDivTwo\" />"
+"</div>"
+"<div id=two>"
+"<input type=\"text\" name=\"age[]\" />"
+"</div>"
);
});
});
</script>
</head>
<body>
<form name="name" method="post" action="">
<div id=testAppend>
<div id=one>
<input type="text" name="name[]" /><br />
<input type="checkbox" name="needDivTwo[]" id="needDivTwo" />
</div>
<div id=two>
<input type="text" name="age[]" />
</div>
</div>
<input type="button" id="addTestAppend" value="[ Add Append ]" />
</form>
</body>