$(this).next()
$(this).next().next()
$(this).parent().find('input')
label input {display: block;}
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- <link rel="stylesheet" type="text/css" href="tmp.css" /> --> <style type="text/css"> label { display: block; } label + label { margin-top: 2px; } label [type='text'] { display: none; } </style> <script type="text/javascript"> $(document).ready(function (){ $(':checkbox').click(function (){ if (this.checked) { $(this).nextAll('input:text').show().val(this.value); } else { $(this).nextAll('input:text').hide(); }; }); }); </script> </head> <body> <form> <label> Item 1 <input type='checkbox' value='1' /> <br /> <input type='text' value='' /> </label> <label> Item 2 <input type='checkbox' value='2' /> <br /> <input type='text' value='' /> </label> <label> Item 3 <input type='checkbox' value='3' /> <br /> <input type='text' value='' /> </label> </form> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> input{ margin-bottom: 12px; } input[type='text']{ margin-left: 12px; } input{ margin-bottom: 12px; margin-top: 2px; } input + input{ display: none; } input:checked + input[type='text'] { display: inline-block; } </style> </head> <body> <form> <label for=check1>Item 1</label> <input id=check1 type='checkbox' value='1' /><input type='text' value='' /><br /> <label for=check2>Item 2</label> <input id=check2 type='checkbox' value='2' /><input type='text' value='' /><br /> <label for=check3>Item 3</label> <input id=check3 type='checkbox' value='3' /><input type='text' value='' /><br /> </form> </body> </html>
