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>中，则在提交表单（normaly或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)（取决于您的表单方法）。

将复选框值分配给变量

2 个答案: