JQuery 个步骤：如何 show/hide 基于用户输入的额外步骤

Question

我正在使用 jquery 步来创建 "interactive" two/three 步骤表单。

我想要实现的一件事是 show/hide 在第 2 步（通常是最后一步）之后的一个附加步骤，这将是基于复选框值的新的最后一步。如果选中，应该显示第 3 步，否则表单将在第 2 步之后提交。但是，我不确定从哪里开始！

这是我目前在 javascript 部分的内容。

     $("#wizard").steps({
        headerTag: "h1",
        bodyTag: "fieldset",
        //transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex)
        {
            //only apply to first step
                if (currentIndex === 0 && ($('#opt1').attr('checked')))
                {
                        $("#wizard").steps("insert", 1, {
                        title: "Step Title",
                        content: "<p>Step Body</p>"
                        });
                }
         return true;

        },
        onFinished: function (event, currentIndex)
        {
             var form = $(this);
            form.submit();

        },



    });

完整表格可在 JSFiddle

Answer 1

希望这个更新后的脚本对您有所帮助。根据您提供的 JSFiddle，将以下代码粘贴到 </form> 标记之后。

<script>
 var currentStep = 0; //store current step number

  $("#wizard").steps({
    headerTag: "h1",
    bodyTag: "fieldset",
    //transitionEffect: "slideLeft",

    onStepChanging: function(event, currentIndex, newIndex)
    {
        if (newIndex < currentIndex) return true; //Previous button click - allow
        else if (currentIndex === 1 && ($('#opt1').is(':checked'))) return true; //If in second step and checkbox checked then proceed to Step 3
        else if (currentIndex === 1 && (!$('#opt1').is(':checked'))) return false; //If in second step and checkbox checked then stop at Step 2

        return true;
    },

    onStepChanged: function (event, currentIndex, newIndex) {
      currentStep = currentIndex; //Set current step number in currentStep variable

      if (currentIndex === 1 && (!$('#opt1').is(':checked'))) //If in second step and checkbox not checked then display Finish button and hide Next button
      {
         $('a[href="#finish"]').parent().attr("style", "display: block;")
         $('a[href="#next"]').parent().attr("style", "display: none;");
      }
    },

    onFinished: function (event, currentIndex)
    {
      var form = $(this);
      form.submit();
    },
  });

  $("#wizard-t-2").hide(); //Hide Step 3 by default

  //Event handler for checkbox 1 
  function ShowHideDiv1(opt1) {
    var opt1more = document.getElementById("opt1more");
    opt1more.style.display = opt1.checked ? "block" : "none";

    if (opt1.checked) 
    {
        $("#wizard-t-2").show();

      if (currentStep == 1) //If in second step and checkbox checked then display Next button and hide Finish button
      {
         $('a[href="#finish"]').parent().attr("style", "display: none;")
         $('a[href="#next"]').parent().attr("style", "display: block;");
      }
    }
    else
    {
      $("#wizard-t-2").hide();

      if (currentStep == 1) //If in second step and checkbox not checked then display Finish button and hide Next button
      {
         $('a[href="#finish"]').parent().attr("style", "display: block;")
         $('a[href="#next"]').parent().attr("style", "display: none;");
      }
    } 
  }

  function ShowHideDiv2(opt2) {
    var opt2more = document.getElementById("opt2more");
    opt2more.style.display = opt2.checked ? "block" : "none";
  }

  function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
  }
</script>

JQuery 个步骤：如何 show/hide 基于用户输入的额外步骤

JQuery steps: How to show/hide an additional step based on user input

html

javascript

jquery

jquery-steps