4

現在、ステップを使用する寄付フォームを作成しています。ステップごとに移動するために、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") は割り当て用です。ユーザーがチェックボックスを1つだけ選択した場合、そのステップをスキップして、対応する入力値を100に設定したいと思います。キャッチは、チェックボックスの配列を実行する方法がわかりません（[name = list-item]を使用していると想定しています）、1つだけが選択されていることを確認し、どれを特定してから、次のステップをスキップしてそれぞれの割り当てボックスの値を 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
  • jQuery1.8.3
  • Twitter ブートストラップ

お時間とご協力をいただき、ありがとうございました。

4

3 に答える 3

1

チェックボックスの配列を繰り返し処理し、チェックされているものを見つけるには:

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

});

このステップをスキップするには、もう少し詳しく見ていく必要がありますが、それで始められるはずです...

于 2013-01-09T14:25:02.620 に答える
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");
于 2013-01-09T14:30:15.170 に答える
1

ボタンがクリックされたときに実行するように作成した例を次に示します。

$(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 の例

于 2013-01-09T14:33:14.670 に答える