这与我之前的问题here有关，但我认为它更简单。
我正在创建一个包含多个步骤的分步流程，最后一步是摘要页面。每个步骤都包含一些复选框，在摘要页面上我想显示选择的内容，然后允许他们提交表单。
我正在努力从相关问题中理解这个过程，希望这个简化版本能帮助我理解。
这是我的设置：
<?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="answer<?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 设置，使用来自@Niels 答案的 jquery，它抓住了问题，但没有检查到的答案。
<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="answer<?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>