javascript - 将复选框选择合并到appendChild中

Question

我当前正在创建一个复选框并尝试将选择附加到函数中。

这是我目前拥有的:

<input type="checkbox" id="Animal" value="Animal" name="langs" checked><label for="UW">UW</label><br>

<input type="checkbox" id="Vegatable" value="Vegetable" name="langs"><label for="OIB">OIB</label><br>

<input type="text" id="Other" value="N/A" name="langs" style="font-size:10px;" style="width: 125px;" /><label for="Other">Other</label><br>

这是我目前的 Appendchild 结果:

<tr name="checkbox_value"><th>Systems Used: </th>
        </tr>

我正在使用 Document.getElementId 选项，但无法获取多个结果或单个结果

 var SysRow = document.getElementById("checkbox_value");


var td4 = document.createElement("td");


td4.innerHTML = document.getElementById("langs").value;


SysRow.appendChild(td4);

根据我的理解，我可以使用 document.getElementsByClassName() 或 document.querySelectorAll() 但我不确定如何实现它。

如果用户选择“动物”和“蔬菜”等多个结果怎么办？

Answer 1

使用此代码:

var items=document.getElementsByClassName('appendInput');
var checkedItems ="";
for(var i=0; i<items.length; i++){
    if(items[i].type=='checkbox' && items[i].checked)
        checkedItems+=items[i].value+" ";
}
document.getElementById('result').innerHTML = checkedItems;

<input class="appendInput" type="checkbox" name="langs" value="Animal" checked>
<input class="appendInput" type="checkbox" name="langs" value="Vegetable" checked>
<input class="appendInput" type="checkbox" name="langs" value="N/A">

<div id="result"></div>