逐步复选框流程，包含选择摘要

我正在尝试创建一个3步骤的过程，有人通过复选框选择他们想要的步骤1和2，然后在第三步显示这些选择的摘要。

这是我的html设置方式：

 
 
 
Step 1 of 3
 
 
 
 
 
 
1. Hardware & software options Please choose one or more of the following
 
 
  
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14727451/step-by-step-checkbox-process-with-summary-of-selections/" alt="" />   
 <input type="checkbox" name="hardware[]" value=""> Select
 
 
  
 
 
  
 
 
Step 2 of 3
 
 
 
 
 
 
2. Accessories Please choose one or more of the following
 
 
   
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14727451/step-by-step-checkbox-process-with-summary-of-selections/" alt="" />   
 <input type="checkbox" name="accessories[]" value=""> Select
 
 
  
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14727451/step-by-step-checkbox-process-with-summary-of-selections/" alt="" />   
 <input type="checkbox" name="accessories[]" value=""> Select
 
 
   
 
 
  
 
 
Step 3 of 3
 
 
 
 
 
Summary
 
  
 
 
   

这是我踩过这个过程的jquery：

 var prevLink = 'Back'; var nextLink = 'Next'; var navHTML = '
' + prevLink + nextLink + '
'; var prevLink = 'Back'; var nextLink = 'Next'; var navHTML = '
' + prevLink + nextLink + '
'; jQuery(document).ready(function( $ ) { // init $('#customisesystem > div') .hide() .prepend(navHTML); $('#first-step .prev').remove(); $('#last-step .next').remove(); // show first step $('#first-step').show(); $('a.next').click(function(){ var whichStep = $(this).parent().parent().attr('id'); if( whichStep == 'first-step' ) { // validate first-step } else if( whichStep == 'second-step' ) { // validate second-step } else if( whichStep == 'last-step' ) { // validate last-step } $(this).parent().parent().hide().next().show(); }); $('a.back').click(function(){ var whichStep = $(this).parent().parent().attr('id'); if(whichStep == "first-step"){ $(".customise").hide(); $(".entire_product").show(); } else{ $(this).parent().parent().hide().prev().show(); } }); }); 

---

这是不起作用的部分：

 jQuery(document).ready(function( $ ) { var summary = $('#customise-area-3 p').get(0); $('input[type=checkbox][name="hardware[]"]:checked').each(function(k,v) { //Retrieve the value of the checkbox. var checkboxValue = v.val(); //Add the checkbox value to the summary area: summary[0].innerHTML += checkboxValue + '
'; }); }); 

目前，当我进行硬件选择并转到第三步时，它不会在摘要中显示任何信息。 我哪里错了？

这是工作链接 – teamworksdesign.com/clients/rogue/system/dc-stimulator点击右侧的“获取报价”。 这将显示步骤1，单击下一步执行步骤2，然后单击下一步执行步骤3（即摘要）。

Answer 1

如果“step”div都被赋予class="step" ，那么事情会变得更容易，从而允许使用jQuery(".step")选择它们，并且避免每个div都需要具有唯一id。

通过在最后一步中包含执行validation的“validation”按钮来回答您的具体问题。 如果最后一步有效：

• 将创建并显示摘要文本
• 隐藏“validation”按钮，并显示“提交”按钮。

最后一个function可确保在validation最后一步之前无法提交表单，并且用户可以在刷新屏幕之前阅读摘要。

这是代码（带注释）：

 //create nav wrapper var $nav = $('
').addClass('prev-next'); //create Prev button, attach click handler and append to nav wrapper $('Back').on('click', function () { $(this).closest(".step").hide().prev(".step").show(); }).appendTo($nav); //create Next button, attach click handler and append to nav wrapper $('Next').on('click', function () { var $step = $(this).closest(".step"); if (validate($step)) { $step.hide().next(".step").show(); } }).appendTo($nav); //In one long jQuery chain ... //* prepend nav to each step div //* hide all steps except the first //* convert first 'Back' link and last 'Next' link to spans. $(".step").prepend($nav).hide() .filter(":first").show().find("a.prev").after('Back').remove().end().end() .filter(":last").find("a.next").after('Prev').remove(); //Last step doesn't have a "Next" button but does have a "Validate" button //and a submit button, which is hidden until the last step is validated, //thus allowing the Summary message to be shown. //Otherwise, the summary message would appear only for a brief moment. var $validateButton = $("#validate").on('click', function() { if( validate( $(".step:last") ) ) { //var summary = []; var summary = ["Test Message"];//for debugging $('input[type=checkbox][name="hardware[]"]:checked').each(function(i, ch) { summary.push($(ch).val()); }); $('#customise-area-3 p').html(summary.join('
')); $(this).hide(); $("input[name='submit']").show(); } }); //Unfortunately, hidden form elements are not inlcuded in the submission, //so all steps must be shown before the form is submitted. var $submitButton = $("input[name='submit']").on('submit', function() { $(".step").show(); return true; }); function validate($step) { //var valid = false; var valid = true;//for debugging //Set the last section's validate and submit buttons to their "unvalidated" states. $validateButton.show(); $("input[name='submit']").hide(); //Perform validation switch ($step.index(".step")) {//index-origin is zero case 0: //validate step 1 here //if valid, set `valid` to true break; case 1: //validate step 2 here //if valid, set `valid` to true break; case 2: //validate step 3 here //if valid, set `valid` to true break; } return valid;//Important - determines behaviour after validate() returns. } 

这是一个DEMO

您将看到我对HTML进行了一些其他的小修改，特别是在最后一步中添加了Validate按钮。

编辑

如果最后一步仅用于显示摘要并且不需要validation它自己，那么事情就更简单了：

 //Create nav wrapper var $nav = $('
').addClass('prev-next'); //Create Prev button, attach click handler and append to nav wrapper $('Back').on('click', function() { $(this).closest(".step").hide().prev(".step").show(); }).appendTo($nav); //Create Next button, attach click handler and append to nav wrapper $('Next').on('click', function() { $('#summary_text').html(makeSummary()); var $step = $(this).closest(".step"); if (validate($step)) { $step.hide().next(".step").show(); } }).appendTo($nav); //In one long jQuery chain ... //* prepend nav to each step div //* hide all steps except the first //* convert first 'Back' link and last 'Next' link to spans. var $steps = $(".step").prepend($nav).hide() .filter(":first").show().find("a.prev").after('Back').remove().end().end() .filter(":last").find("a.next").after('Prev').remove().end().end(); //Set step titles $steps.each(function(i, step) { $(step).find(".step-title").text('Step ' + (i+1) + ' of ' + $steps.length); }); //Unfortunately, hidden form elements are not inlcuded in the submission, //so all steps must be shown before the form is submitted. var $submitButton = $("input[name='submit']").on('submit', function() { $steps.show(); return true; }); function validate($step) { //var valid = false; var valid = true;//for debugging //Perform validation switch ($step.index(".step")) {//index-origin is zero case 0: //Validate step 1 here //if valid, set `valid` to true break; case 1: //Validate step 2 here //if valid, set `valid` to true break; case 2: //No validatation required break; } return valid;//Important - determines behaviour after validate() returns. } function makeSummary() { var summary = []; $steps.not(":last").each(function(i, step) { $step = $(step); summary.push('
' + $step.data('name') + '
'); var $ch = $step.find('input[type="checkbox"]:checked'); if(!$ch.length) { summary.push('
No items selected
'); } else { $ch.each(function(i, ch) { summary.push('
' + $(ch).val() + '
'); }); } }); return summary.join(''); } 

DEMO

在演示中，您将找到HTML和CSS的更多mod。

备注：

• 除非我错过了什么，否则javascript现在应该自动响应更多/更少的步骤。 因此，如果客户要改变主意并希望将硬件和软件拆分为单独的步骤，则只需要更改HTML。 （哦，是的， validation()函数 – 这是一个特例）。
• 现在自动生成“Y的步骤X”文本，并且HTML中只需要
  

  。

• 现在需要第一步和第二步div中的data-name属性。 这在摘要中使用。
• 摘要已格式化; 使用

  元素而不是
; 包括

  部分标题。

• 现在，从最后一步中删除了“validation”按钮。
• 各种附加/修改的CSS指令。