Question

When the user clicks add more options, a from is created with javascript document.getElementById('addmore').innerHTML… It works great to display the form multiple times. I added a unique number each time to create unique IDs for each of the fields for submission. I have a checkbox that, if checked, needs to display another fields to get filled out:

document.getElementById('addmore').innerHTML += '<p><div class="required">*Type of Folder</div><label for="it09" class="hidelabel">Content Drive</label><input name="request['+fields+'][Type of Folder:]" id="cbpathCDB'+fields+'" type="checkbox" value="Content Drive" class="required" /><strong>Content Drive</strong> (A: drive)<br /><div id="pathCDB'+fields+'"><label for="newpathCDB"><span class="req">*Path to Content Drive Folder</span></label><input name="request['+fields+'][Path to Content Drive Folder:]" type="text" id="npcdb'+fields+'" size="50" class="required"/><br /><small>Path of folder to be created on Content Drive (A: drive)<br><em>(example: A:\drivefolder</em></small><br /></div></p>';

I have tried multiple ways (jquery included) of getting the next div, pathCDB+fields, to show when the checkbox is checked. It works fine without the +fields in there… see http://jsfiddle.net/kuVzV/4/ however, when I add the fields it fails to show/hide with the checkbox.

When the form is created though, the div doesn’t show at first, just like it shouldn’t… so I know the ID is correct. According to Firebug it is showing the correct ID with the field showing the correct # that is create…

I am at a loss right now.

Any suggestions on how to show/hide this div if the checkbox is checked for multiple inputs created dynamically?

Answer 1

Try checking out jQuery .show() and Jquery .hide(). I believe this is what you are looking for.

$(document).ready(function(){
    $("#cbpathCDB1").on('click', $("#cbpathCDB1 input[type=checkbox]").is(":checked"), someFunction);

});
function someFunction(event){
    if (event.target.checked){
         $("#pathCDB1").hide('slow');
    }
    else{
       $("#pathCDB1").show('slow');
    }
}​

jsfiddle http://jsfiddle.net/FERMIS/7ThtT/6/ Here is an example with multiple fields.