javascript - 基于另一个复选框复制复选框组的状态

Question

我的表单在 5 个不同的部分中包含重复的人口统计信息。如果用户在 radio 上单击"is"，然后选择要从中复制信息的相应部分，我希望将所有人口统计信息从一个部分复制到另一部分。

我可以毫无问题地使用文本输入，但是使用复选框时它完全失败。我设法在 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/

Answer 1

The most important thing I think you should know, is that we can't trigger/handle events from the elements appended to the DOM/body

So Instead of using this:

$('input[type=radio][name=demoInfoSame]')

We'll use this:

$(document).on("change","input[type='radio'][name*='demoInfoSame']",function(){});

to Handle clicks coming from any Yes/No 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>

The Javascript Code is Commented in such a way you can understand what I did, And I still open for more questions

最诚挚的问候!