在摘要页上显示复选框选择

这与我之前的问题有关，但我认为它更简单。

我正在创建一个循序渐进的过程，有几个步骤，最后一步是总结页面。每个步骤都包含一些复选框，在摘要页面上，我想显示被选中的内容，然后允许他们提交表单。

我正在努力理解相关问题的过程，希望这个简化的版本能帮助我理解。

这是我的设置:

<?php $counter = 1; 
$amount = get_field('select_number_of_questions');
$repeater = get_field("step_by_step_test");
shuffle($repeater);
$repeater_limit = array_slice($repeater,0,$amount);
foreach($repeater_limit as $repeater_row) { ?>
<div class="form-row">
        <div id="modules-repeat">                           
            <p class="training"><?php echo $repeater_row['question']; ?></p><br />
            <p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br />
            <?php $rows = $repeater_row['answer_options'];
            foreach ($rows as $row){ ?>
            <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
                    <div style="display:table-row;">
                    <div style="display:table-cell;">
                        <input style="width: 20px;" type="checkbox" name="answerswer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
                    </div>
                    <div style="display:table-cell;">
                        <p>
                            <?php echo $row['answer']; ?>
                        </p>
                    </div>              
                    </div>
            <?php } ?>
            <div class="inner"></div>
            <button class="next"></button>
            <div class="clear"></div>
        </div>
</div>
<?php $counter++; } ?>
<div class="form-row" id="form-row-last" style="display:none;">
    <div id="modules-repeat">                           
        <p>Summary page</p>
            <?php foreach($repeater_limit as $repeater_row) { ?>
                <p class="training"><?php echo $repeater_row['question']; ?></p><br />
            <?php } ?>
            <div class="inner"></div>
            <button class="next"></button>
            <div class="clear"></div>
        </div>
</div>

这是jquery:

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    
    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').appendTo($('.inner').not(':first'));
    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();
    // hide on last step
    $('button.next').last().hide();
    // add the submit button to the last form-row
    $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));

    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parents('div.form-row').hide().prev('div.form-row').show();
    });
    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parents('div.form-row').hide().next('div.form-row').show();
    });    
});
});
</script>

@Niels目前有最接近的答案。这是我的html/php设置，使用jquery从@Niels的答案，它捕获的问题，但不是被检查的答案。

<p class="training"><?php echo $repeater_row['question']; ?></p><br />
<p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br />
<div class="question" data-max-answers="<?php echo $repeater_row['required_answers']; ?>">
    <?php $rows = $repeater_row['answer_options'];
    foreach ($rows as $row){ ?>
    <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
    <div style="display:table-row;">
        <div style="display:table-cell;">
            <input style="width: 20px;" type="checkbox" name="answerswer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
        </div>
        <div style="display:table-cell;">
            <p>
                <?php echo $row['answer']; ?>
            </p>
        </div>              
    </div>
    <?php } ?>
</div>  
<div class="inner"></div>
<button class="next"></button>
<div class="clear"></div>
</div>