0

可能なチェックボックスのリストがあり、ユーザーは最大 3 つのオプションを選択できます。私が苦労しているのは、どのボックスがチェックされているかを認識し、それらを変数に割り当てる方法です(後でajax呼び出しを送信するため)。これまでのところ、私が書いたコードは、チェックされているかどうかに関係なく、最初の 3 つのチェックボックスの値を取り、それらを ajax 呼び出しで使用しているようです。どこが間違っているのかを理解するのを手伝ってください。

ここに私のHTMLがあります:

<ul id="Names" class="stateNames">
    <li>Alabama
        <ul class="airports">
            <li><input type="checkbox" class="destination"/> Birmingham, AL</li>
            <li><input type="checkbox" class="destination"/> Huntsville, AL</li>
        </ul>
    <li>Alaska
        <ul class="airports">
            <li><input type="checkbox" class="destination"/> Anchorage, AK</li>
            <li><input type="checkbox" class="destination"/> Fairbanks, AK</li>
            <li><input type="checkbox" class="destination"/> Juneau, AK</li>
        </ul>
    </li>
</ul>
<input type="button" onclick="clickHandler()" value="Submit" />

ここに私のjavascript/jqueryがあります:

function clickHandler() {
endLocDest1 = "";
endLocDest2 = "";
endLocDest3 = "";

for(i = 0; i < document.getElementsByClassName('destination').length; i++) {
    if (document.getElementsByClassName('destination')[i].checked) {
        endLocDest1 = document.getElementsByClassName('destination')[0].value;
        endLocDest2 = document.getElementsByClassName('destination')[1].value;
        endLocDest3 = document.getElementsByClassName('destination')[2].value;
    }
    alert(endLocDest1 + endLocDest2 + endLocDest3);
};
}

また、このコードをフィドルhttp://jsfiddle.net/6ywm1n6h/3/ (現在は何も返さない) に入れました。

前もって感謝します！

4

2 に答える 2

0

あなたのjsfiddleでは、jQueryがオンになっていると仮定して、使用してみてください...

$(".destination:checked")

チェックされたすべてを返します。これを配列として使用して、どれがクリックされたかを判断できます。

編集： これを変数に割り当てることができます...

var checked_values = $(".destination:checked");

...次にループして、必要なことを行います。

for (var i=0,len=checked_values.length; i<len; i++) {
  console.log(checked_values[i].attr("id"));
}
于 2014-12-02T20:36:54.607 に答える