如何僅向前跳過一步並設置一個值如果僅選中一個複選框

Question

我目前正在創建一個使用步驟的捐贈表格。要一步一個步驟，我使用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 &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
• Twitter的引導

謝謝大家提前爲你的時間和幫助。

Answer 1

試試這個片斷：

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

Answer 2

遍歷複選框的數組，並找出哪些檢查：

$("#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 
    } 

}); 

對於省略這一步，我需要花費更長的外觀，但應該讓你開始...

Answer 3

這裏是我提出來運行一個按鈕被點擊時的例子：

$(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); 
     } 
    }) 
    }); 

jsfiddle example