使用javascript獲取複選框值，並在div中添加這些值，因爲我選擇了多個值

Question

使用javascript獲取複選框值並將這些值添加到div中，因爲我選擇了多個值。

我想是這樣的：http://img515.imageshack.us/img515/4503/w3i.jpg

當項目slected：http://img59.imageshack.us/img59/8761/fizo.jpg

比的onclick比較BTN發送選擇compare.php頁

<SCRIPT LANGUAGE="JavaScript"> 
    //do not getting what to do? 
</SCRIPT> 
<FORM> 
     <INPUT TYPE=CHECKBOX NAME="road" VALUE="Car">car 
     <INPUT TYPE=CHECKBOX NAME="road" VALUE="bike" CHECKED>bike 
     <INPUT TYPE=CHECKBOX NAME="road" VALUE="truck">truck 
     <INPUT TYPE=CHECKBOX NAME="road" VALUE="bus" CHECKED>bus 
     <div id="compare" style="border:2px solid red;"></div> 
     </FORM> 

Answer 1

這裏所有的項目是一個例子，以讓你開始：

HTML

<form id='compareForm' action='#'> 
    <input type='checkbox' name="road" value="car">car 
    <input type='checkbox' name="road" value="bike" checked>bike 
    <input type='checkbox' name="road" value="truck">truck 
    <input type='checkbox' name="road" value="bus" checked>bus 
    <button type='submit'>Compare</button> 
</form> 
<div id="compare"></div> 

請注意，對於可訪問性和可用性，您可能想要將這些單詞包裝在label元素中。

的JavaScript

document.getElementById('compareForm').addEventListener('submit', function (e) { 
    var items = document.getElementsByName('road'), 
     i; 

    // Prevent default form submission functionality 
    e.preventDefault(); 

    // Clears the results box 
    document.getElementById('compare').innerHTML = ''; 

    // Loop through all the checkboxes 
    for (i = 0; i < items.length; i += 1) { 
     if (items[i].checked) { 
      // Do something if the box is checked. 
      document.getElementById('compare').innerHTML += '<p>' + items[i].value + '</p>'; 
     } 
    } 
}); 

見jsFiddle。