将复选框值分配给变量

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>并且当表单提交（normaly或AJAX'ed）</form>然后检查输入将被自动发送。你的错误是你没有设置name或value s到你的复选框。尝试：

<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)（取决于你的形式方法）的页面接收表单提交。