[英]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.