javascript - 如果只选中一个复选框,如何向前跳过一步并设置一个值

标签 javascript jquery html

我目前正在创建一个使用步骤的捐赠表格。为了一步一步移动,我使用 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。问题是,我不知道如何遍历复选框数组(我假设使用 [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 &rsquo;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">&#37; 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">&#37; to the Class of 2012 Scholarship <abbr title="In Honor Of">IHO</abbr> Mr. Jason M. Ferguson &rsquo;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">&#37; 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

我正在使用的资源:

  • PHP
  • jQuery 1.8.3
  • 推特引导

提前感谢大家的时间和帮助。

最佳答案

试试这个片段:

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");

关于javascript - 如果只选中一个复选框,如何向前跳过一步并设置一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14237274/

相关文章:

javascript - jQuery 选择器规则是否会针对较新的浏览器发生变化?

javascript - 在视口(viewport)中播放 html 视频,在离开视口(viewport)时暂停

javascript - 如何更新 Rails 部分中的 jquery 日期选择器

jquery - Safari - jQuery 添加的 CSS 转换不起作用

javascript - jquery select 标签没有被带到前面

html - 两个并排的div在内容上方的右侧第三个

html - 如何并排渲染 <li>?

javascript - 使用 foreach 循环 toast

javascript - 如何以适当的方式使用 $(.class)?

javascript - 服务器返回 HTML,但我无法注入(inject)网站