Question

当用户点击添加更多选项时，会使用javascript document.getElementById('addmore').innerHTML创建from ...它可以很好地多次显示表单。我每次都添加一个唯一的编号，为每个提交的字段创建唯一的ID。我有一个复选框，如果选中，则需要显示另一个要填写的字段：

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>';

我尝试了多种方式（包含jquery）获取下一个div，pathCDB +字段，以便在选中复选框时显示。它在没有+字段的情况下工作正常...但是，当我添加字段时，它无法显示/隐藏复选框。http://jsfiddle.net/kuVzV/4/

创建表单时，div首先不显示，就像它不应该...所以我知道ID是正确的。根据Firebug，它显示正确的ID，字段显示正确的＃，即创建...

我现在不知所措。

如果为动态创建的多个输入选中复选框，有关如何显示/隐藏此div的任何建议吗？

Answer 1

尝试检出jQuery .show()和Jquery .hide()。我相信这就是你要找的东西。

$(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/以下是多个字段的示例。

使用if else复选框和多个字段验证动态创建输入

1 个答案: