將複選框值分配給變量

我有一個可能的複選框列表，用戶最多可以選擇三個選項。我正在努力的是如何識別哪些盒子被檢查，然後將它們分配給變量（在稍後的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/（目前不返回任何東西）。

在此先感謝！

來源

2014-12-02 Quinn

嘗試： var destBoxes = document.getElementsByClassName（「destination」）;對於（i = 0; i Jim 2014-12-02 20:29:42

是否每個州或總共有3個限制？ – haim770 2014-12-02 20:32:59

@ haim770它是3 （可以是單個狀態，也可以是多個狀態） – Quinn 2014-12-02 21:12:35

在你的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-02 20:36:54 rfornal

可以請你詳細闡述一下這之後需要做些什麼？我對javascript和jquery有點新東西 – Quinn 2014-12-02 21:28:15

謝謝，這對我很有用 – Quinn 2014-12-03 00:16:45

如果您的代碼被包裹在<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)（取決於你的形式方法）的頁面接收表單提交。

來源

2014-12-02 20:39:09

我其實不是故意使用

You不需要其他建議，因爲解決方案已經發布在這裏了。總結：設置'value'屬性爲複選框並選擇th em用'$（'：''）'。 – 2014-12-02 22:13:14

將複選框值分配給變量

回答

相關問題