Показывать флажки на сводной странице

Это связано с моим предыдущим вопросом здесь , но я думаю, что это проще.

Я создаю пошаговый процесс, который имеет несколько шагов, последний шаг – сводная страница. На каждом шаге есть некоторые флажки, на итоговой странице я хочу показать, что было выбрано, и позволить им отправить форму.

Я борюсь с пониманием процесса от связанного вопроса, надеюсь, эта упрощенная версия поможет мне понять.

Вот моя настройка:

<?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, с использованием 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="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> 

 $("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); }); 

 var name = $('#name').val(); ... var city = $('#citySelectBox').val(); 

 <div class="page1">1<br /><button>Next</button></div> <div class="page2">2<br /><button>Next</button></div> <div class="page3">3<br /><button>Next</button></div> <div class="page4">4<br /><button>Next</button></div> <div class="page5">5<br /><button>Next</button></div> <div class="page6">6 (end)</div> 

 div[class^="page"] { display: none; margin: 20px auto; padding: 15px; width: 400px; height: 200px; box-sizing: border-box; background-color: orange; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } 

 $(document).ready(function() { $('.page1').css('display', 'block'); $('div[class^="page"] button').click(function(evt) { evt.preventDefault(); // Figure out the current page var page_nr = $(this).parent().attr('class'); page_nr = page_nr.replace('page', '') * 1; // Hide current page $(this).parent().animate( { opacity: 'hide', display: 'none' }, 750, function() { // Show next page $('.page' + (page_nr + 1)).animate({ opacity: 'show', display: 'block' }, 750); }); }); });