[英]How to skip ahead one step and set a value if only one checkbox is selected
我目前正在創建一個使用步驟的捐贈表單。 要從一步到另一步,我使用jQuery(特別是以下函數):
function showNextStep(currentStep) {
$("#step" + currentStep).slideToggle("slow", function () {
if (currentStep === 1) {
//figure out what kind of donation they are making
var chosenDonationType = $("[name=donationType]").val();
//show the apppropriate slide
switch (chosenDonationType) {
case "oneTimeGift":
currentStep += 1;
$("#makingAOneTimeGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
case "recurringDonation":
currentStep += 1;
$("#makingARecurringGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
//if somehow they changed it to something else, ignore them and return false.
default:
return false;
//break; not needed due to return
}//end switch
} else {
currentStep += 1;
$("#step" + currentStep).slideToggle("slow");
}
});
}
我有一個用戶可以捐贈的資金清單。 此后的步驟(id =“step4”)用於分配。 如果用戶只選擇一個復選框,我想跳過該步驟並將相應的輸入值設置為100。 Catch是,我不知道如何運行復選框數組(我假設使用[name = list-item])並發現只選擇了一個,確定哪一個,然后跳過下一步驟,將相應分配框的值設置為100.什么是性能有效的方法?
復選框使用以下樣式:
<label class="checkbox">
<input type="checkbox" id="showGoodMenGoodCitizensAllocation" name="list-items[]" value="Good_Men_Good_Citizens" />
Good Men, Good Citizens Scholarship
</label>
<label class="checkbox">
<input type="checkbox" id="showClassof2012Allocation" name="list-items[]" value="Class_Of_2012" />
Class of 2012 Scholarship <abbr title="In Honor Of">IHO</abbr> Mr. Jason M. Ferguson ’96
</label>
<label class="checkbox">
<input type="checkbox" id="showClassof2011Allocation" name="list-items[]" value="Class_Of_2011" />
Class of 2011 Scholarship <abbr title="In Honor Of">IHO</abbr> Ms. Anita Garland
</label>
分配輸入如下:
<div id="GoodMenGoodCitizensAllocation" class="input-append hiddenByDefault">
<input type="number" name="Good_Men_Good_Citizens-Allocation" min="0" max="100" value="0" />
<span class="add-on">% to the Good Men, Good Citizens Scholarship</span>
</div>
<div id="ClassOf2012Allocation" class="input-append hiddenByDefault">
<input type="number" name="Class_Of_2012-Allocation" min="0" max="100" value="0" />
<span class="add-on">% to the Class of 2012 Scholarship <abbr title="In Honor Of">IHO</abbr> Mr. Jason M. Ferguson ’96</span>
</div>
<div id="ClassOf2011Allocation" class="input-append hiddenByDefault">
<input type="number" name="Class_Of_2011-Allocation" min="0" max="100" value="0" />
<span class="add-on">% to the Class of 2011 Scholarship <abbr title="In Honor Of">IHO</abbr> Ms. Anita Garland</span>
</div>
有關完整頁面代碼: http : //pastebin.com/yFv2day1
對於目前使用的完整JavaScript代碼: http : //pastebin.com/P0YVRuqY
我正在使用的資源:
提前感謝大家的時間和幫助。
迭代一系列復選框並找出檢查的內容:
$("#YOUR-FORM input[type=checkbox]").each(function (i, e) {
if ($(e).attr("checked") == "checked") {
// This checkbox is checked... do some stuff
} else {
// Not checked...ignore
}
});
對於跳過這一步,我需要長時間看一下,但這應該讓你開始......
試試這個片段:
var $chck = $("#step3 :checkbox:checked");
if ($chck.length === 1) {
var selectedVal = $chck.val();//do whatever you want with that
currentStep += 2;
} else
currentStep++;
$("#step" + currentStep).slideToggle("slow");
這是我在單擊按鈕時運行的示例:
$(function () {
$('#evaluate').click(function () {
var checked = $('input[name="list-items[]"]:checked');
if (checked.length == 1) {
alert('one checked: ' + checked.val());
} else {
var vals = [];
checked.each(function () {
vals.push($(this).val());
});
alert(checked.length + " boxes checked: " + vals);
}
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.