[英]JQuery steps: How to show/hide an additional step based on user input
我正在使用jquery-steps創建一個“交互式”二/三步形式。
我試圖實現的一件事是在步驟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中,在</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.