为变量分配复选框值

Question

我有一个可能的复选框列表，用户最多可以选择三个选项。 我正在努力的是如何识别选中了哪些框，然后将它们分配给变量（以在以后的ajax调用中发送）。 到目前为止，我编写的代码似乎只采用前三个复选框值，而不管是否选中它们，并在我的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/ （目前不返回任何内容）。

提前致谢！

Answer 1

在您的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"));
}

Answer 2

如果您的代码包装在<form>和</form>则在提交表单（正常或AJAX版本）时，选中的输入将自动发送。 您的错误是您未在复选框中设置name或value 。 尝试：

<input type="checkbox" name="airport[alabama][]" value="Birmingham">
<input type="checkbox" name="airport[alabama][]" value="Huntsville">
<input type="checkbox" name="airport[alaska][]" value="Anchorage">
<input type="checkbox" name="airport[alaska][]" value="Fairbanks">

并在接收表单提交的页面中查看print_r($_POST)或print_r($_GET) （取决于您的表单方法）。