在摘要页面上显示复选框选择(Show checkbox selections on a summary page)

在摘要页面上显示复选框选择(Show checkbox selections on a summary page)

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

我正在创建一个包含多个步骤的分步流程，最后一步是摘要页面。 每个步骤都包含一些复选框，在摘要页面上我想显示所选内容然后允许他们提交表单。

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

这是我的设置：

<?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>

This is related to my previous question here, but I think it's more simple.

I'm creating a step by step process that has several steps, the final step being a summary page. Each step includes some checkboxes, on the summary page I want to show what was selected then allow them to submit the form.

I'm struggling with understanding the process from the related question, hopefully this simplified version will help me understand.

Here's my setup:

<?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>

Here's the 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 currently has the closest answer. This is my html/php setup, with using the jquery from @Niels answer, it grabs the question but not the answer that is checked.

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

最满意答案

为什么不对复选框进行更改，然后生成LI列表或中断选项的位置？ 就像是：

$("input[type=checkbox]").on("change", function(){ var html = ""; // Get checked checkboxes $(".form-row").each(function(){ var question = $(this).find(".training").text(), checkedlist = []; $(this).find("input:checked").each(function(){ checkedlist.push($(this).val()); }); // Add question and answers to the summary, only if minimum of 1 checkbox checked if( checkedlist.length ) { html += "Question: '" + question + "': " + checkedlist.join(", ") + "<br />"; } }); $(".inner").html(html); });

Why don't you get the change of the checkbox, and then generate a list of LI or breaks where the choices are posted? Something like:

$("input[type=checkbox]").on("change", function(){ var html = ""; // Get checked checkboxes $(".form-row").each(function(){ var question = $(this).find(".training").text(), checkedlist = []; $(this).find("input:checked").each(function(){ checkedlist.push($(this).val()); }); // Add question and answers to the summary, only if minimum of 1 checkbox checked if( checkedlist.length ) { html += "Question: '" + question + "': " + checkedlist.join(", ") + "<br />"; } }); $(".inner").html(html); });