I have been trying to do this all day. At the end i managed to get it working. I know it is not the best way to do.
Can someone please show me a better way. I need 12 altogether. It does not need to be check box either. It can be just a text. I got the idea from com/2006/12/14/using-jquery-to-show-hide-form-elements-based-on-a-checkbox-selection/
I managed to upload it on http://utilitybase.com/paste/wmq
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme").click(function(){
// If checked
if ($("#checkme").is(":checked"))
{
//show the hidden div
$("#extra").show("fast");
}
else
{
//otherwise, hide it
$("#extra").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra1").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme1").click(function(){
// If checked
if ($("#checkme1").is(":checked"))
{
//show the hidden div
$("#extra1").show("fast");
}
else
{
//otherwise, hide it
$("#extra1").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra2").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme2").click(function(){
// If checked
if ($("#checkme2").is(":checked"))
{
//show the hidden div
$("#extra2").show("fast");
}
else
{
//otherwise, hide it
$("#extra2").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra3").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme3").click(function(){
// If checked
if ($("#checkme3").is(":checked"))
{
//show the hidden div
$("#extra3").show("fast");
}
else
{
//otherwise, hide it
$("#extra3").hide("fast");
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Hide div w/id extra
$("#extra4").css("display","none");
// Add onclick handler to checkbox w/id checkme
$("#checkme4").click(function(){
// If checked
if ($("#checkme4").is(":checked"))
{
//show the hidden div
$("#extra4").show("fast");
}
else
{
//otherwise, hide it
$("#extra4").hide("fast");
}
});
});
</script>
</head>
<body>
<div style="width: 800px;">
<form>
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme" type="checkbox" />
<div id="extra">
<input type="text" name="input" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme1" type="checkbox" />
<div id="extra1">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme2" type="checkbox" />
<div id="extra2">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme3" type="checkbox" />
<div id="extra3">
<input type="text" name="" maxlength="30" />
<label for="checkbox"> Check to enter another email address:</label>
<input id="checkme4" type="checkbox" />
<div id="extra4">
<input type="text" name="" maxlength="30" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Aaron Hathaway :
Hmm. Looking at your code on UtilityBase. Maybe try using the .siblings() jquery function. Then for the click of the checkbox you can do a $(this).siblings('div').hide()/show(); ",
2010-10-29T21:38:34
Adam :
This usually works for me\n\n$(\"div[id^='extra']\").click(function(){\n $div = $(this);\n divID = $div.attr(\"id\").substring(5);\n\n//Hide div w/id extra\n $div.css(\"display\",\"none\");\n\n // Add onclick handler to checkbox w/id checkme\n $(\"#checkme\"+divID).click(function(){\n\n // If checked\n if ($(\"#checkme\"+divID).is(\":checked\"))\n {\n //show the hidden div\n $div.show(\"fast\");\n }\n else\n { \n //otherwise, hide it \n $div.hide(\"fast\");\n }\n\n});\n\n\nThis should keep you from having to write the same thing multiple timesdiv",
2010-10-29T21:51:12
pex :
If I got you right, you might play around with\n\n<head>\n <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js\" type=\"text/javascript\"></script>\n <script type=\"text/javascript\">\n $(document).ready(function(){\n var prototype = $('.prototype').clone();\n\n $('.prototype > input[type=\"checkbox\"]').live('click', function() {\n if($(this).is(':checked')) {\n var clone = prototype.clone();\n clone.find('input[type=\"checkbox\"]').attr('checked', false);\n $(this).parent('.prototype').append(clone);\n } else {\n $(this).parent('.prototype').find('.prototype:last').remove();\n }\n });\n });\n </script>\n</head>\n\n<body>\n <form>\n <div class=\"prototype\">\n <input type=\"text\" name=\"\" maxlength=\"30\" />\n <label for=\"checkbox\"> Check to enter another email address:</label>\n <input id=\"checkme\" type=\"checkbox\" />\n </div>\n </form>\n</body>\n</html>\n\n\n\n\nEDIT: This add's a new input/label/checkbox prototype inside the current one or removes it's children on the other hand. You could add ids to the fields as well.",
2010-10-29T21:56:58
zod :
thats nice .\n\nDid you try .each or .live\n\nhttp://api.jquery.com/each/\n\nhttp://api.jquery.com/live/",
2010-10-29T21:05:57