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

debugcn 发表于 Dev

BhhooHD

当我选择多个值时，使用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>

溜冰场助理6

这是一个使您入门的示例：

的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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。