php - 使用javascript获取复选框值并将这些值添加到div中，因为我选择了多个值

Question

使用 javascript 获取复选框值并将这些值添加到 div 中，因为我选择了多个值。

我想要这样的东西：http: //img515.imageshack.us/img515/4503/w3i.jpg

选择项目时： http ://img59.imageshack.us/img59/8761/fizo.jpg

而不是 onclick compare 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。