我的表单在5个单独的部分中包含重复的人口统计信息。我想将所有人口统计信息从一个部分复制到另一部分，如果用户在收音机上单击是，然后选择相应的部分来复制信息。
我已经使用了文本输入而没有问题，但它完全失败了复选框。我设法在jsfiddle创建了一个我想要的工作演示但是复选框部分在我的表单上不起作用所以我想知道是否有人有任何其他建议。
人口统计信息部分100％相互映射，但有可能有人想在不同的部分中添加不同的人口统计信息，因此我们不仅仅是复制或克隆输入。
<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
Name:
<input type="text" name="name1" id="name1">
<br>
<input type="checkbox" name="race1" id="race1">Check this box!
<br>
<input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br>
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList" id="toolList">
From which tool set would you like to copy demographic information?
<ul class="toolSetList">
<li>
<input type="checkbox" class="toolSet" id="patStudyEstimate" disabled>Patient Study Estimate (check this one)</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Registry</li>
<li>
<input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
<li>
<input type="checkbox" class="toolSet" disabled>Data Extraction</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
</ul>
</div>
<div id="toolSet2">
<h3>
Tool Set 2
</h3>
Name2:
<input type="text" class="name2" name="name2">
<br>
<input type="checkbox" class="race2" name="race2" id="race2">
<br>
<input type="textarea" class="textBlock2" name="textBlock2" id="textBlock2">
</div>
<br>
<div class="hidden" name="finalStep" id="finalStep">
<h2>
Now click 'No' radio button.
</h2>
</div>
//Reveal Section and Enable Inputs/Hide Section, Clear Fields, Disable Inputs
$(document).ready(function() {
$('input[type=radio][name=demoInfoSame]').change(function() {
if (this.value == 'yes') {
$('#toolList').fadeIn('slow').find('input').prop('disabled', false);
} else if (this.value == 'no') {
$('#finalStep').fadeOut('slow')
$('#toolList').fadeOut('slow').find('input').prop('disabled', true);
$('#toolList').find('input:checkbox').prop('checked',false).end();
$('#toolSet2').find('input.name2').val('').end();
$('#toolSet2').find('input.textBlock2').val('').end();
$('#toolSet2').find('input:checkbox').prop('checked',false).end();
}
});
});
//Autofill Form Based on Checkbox State
var myInput = $('#name1');
var copyTextArea = $('#textBlock1');
$(document).ready(function() {
$('#patStudyEstimate').change(function() {
if (this.checked)
$('#toolSet2').find('input.name2').val(myInput.val());
$('#toolSet2').find('input.textBlock2').val(copyTextArea.val());
$('#finalStep').fadeIn('slow');
$( '#toolSet2' ).children( 'input:checkbox' ).each( function( i ) {
var toolSet1Checks = $('#toolSet1' ).children( 'input:checkbox' ).eq( i ).prop( 'checked' );
if ( toolSet1Checks )
{
$( this ).prop( 'checked', true );
}
else
{
$( this ).removeProp( 'checked' );
}
});
});
});
使用JSFiddle：https://jsfiddle.net/nephandys/2rh5v8fj/
答案 0 :(得分：0)
我认为你应该知道的最重要的事情是我们无法做到 从附加到的元素触发/处理事件 的 DOM / <强>体
所以不要使用它：
$('input[type=radio][name=demoInfoSame]')我们将使用此：
$(document).on("change","input[type='radio'][name*='demoInfoSame']",function(){});处理来自任何是 / 否单选按钮的点击次数
在这里，我来找一个新的解决方案，使用input，checkbox＆amp; radio button：
var counter=2;
$(function(){
$(document).on("change","input[type='radio'][name*='demoInfoSame']",function() {
if (this.value == 'yes') {
$(this).find('~ div[id*="toolList"]:first').fadeIn('slow').find('input').prop('disabled', false);
} else if (this.value == 'no') {
$(this).find('~ div[id*="toolList"]:first').fadeOut('slow').find('input').prop('disabled', false);
$(this).find('~ div[id*="toolList"]:first').find('input').prop('checked',false).end();
}
});
$(document).on("click",".toolSetList input[type='checkbox']",function () {
if(this.checked) {
/*************** First Part 'ToolSet' Div ***************/
//Here we Copy the content of the first toolSet div to the new toolSet div
var idDiv1='toolSet'+counter;
$("body").append("<div id="+idDiv1+"></div>");
var prevDiv='#toolSet'+(counter-1);
$('#'+idDiv1).append($(prevDiv).html());
$('#'+idDiv1+" h3").text($(this).parent().text());
//Now we Handle the id's name & content of the elements of the first toolSet
$('#'+idDiv1+" input[id*='name']").attr('id',('name'+counter));
$('#'+idDiv1+" input[id*='name']").attr('name',('name'+counter));
$('#'+idDiv1+" input[id*='name']").val($(prevDiv+" input[id*='name']").val());
$('#'+idDiv1+" input[id*='race']").attr('id',('race'+counter));
$('#'+idDiv1+" input[id*='race']").attr('name',('race'+counter));
$('#'+idDiv1+" input[id*='textBlock']").attr('id',('textBlock'+counter));
$('#'+idDiv1+" input[id*='textBlock']").attr('name',('textBlock'+counter));
$('#'+idDiv1+" input[id*='textBlock']").val($(prevDiv+" input[id*='textBlock']").val());
/************************** # ***************************/
/*************** Second Part 'Text' & 'Inputs' between the Divs ***************/
$("body").append("<br>\n" +
"<br> Will the demographic information for this tool set be identical to another tool set you have already completed?\n" +
"<input type=\"radio\" name="+("demoInfoSame"+counter)+" value=\"yes\">Yes\n" +
"<input type=\"radio\" name="+("demoInfoSame"+counter)+" value=\"no\">No\n" +
"<br>\n" +
"<br>");
/************************************ # *************************************/
/*************** Third & Final Part The group of "Checkbox" ***************/
var idDiv2='toolList'+counter;
$("body").append("<div class=\"hidden\" name="+idDiv2+" id="+idDiv2+"></div><hr>");
var prevDiv2='#toolList'+(counter-1);
$('#'+idDiv2).append($(prevDiv2).html());
/************************************ # *************************************/
counter++;
}
});
});.hidden {
display: none;
}
.toolSetList {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
Name:
<input type="text" name="name1" id="name1">
<br>
<input type="checkbox" name="race1" id="race1">Check this box!
<br>
<input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br>
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList1" id="toolList1">
From which tool set would you like to copy demographic information?
<ul class="toolSetList">
<li>
<input type="checkbox" class="toolSet" disabled>Patient Study Estimate (check this one)</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Registry</li>
<li>
<input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
<li>
<input type="checkbox" class="toolSet" disabled>Data Extraction</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
</ul>
</div>
<hr>
Javascript代码以这样的方式评论，你可以理解什么 我做了，我仍然开放更多的问题
最诚挚的问候！