Question

我当前正在创建一个Checkbox，并尝试将所选内容附加到函数中。

这是我目前拥有的：

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

Answer 2

在要添加的元素上添加类

<input class="toappend" type="text" name="element_1">
<input class="toappend" type="text" name="element_2">
<input class="toappend" type="text" name="element_3">

然后用JS

var allElements = document.querySelectorAll('.toappend');

allElements将成为nodeList，然后可以在函数中传递

function yourFunction(elements) {

    // If you want to use forEach method, you have to convert the nodeList to an Array
    //ES5
    var arrElements = Array.prototype.slice.call(elements);  

    //ES6
    let arrElements = Array.from(elements);

    arrElements.forEach(function(currentEl, index, array) {
        var appendTo = document.querySelector('#checkbox_value');
        appendTo.insertAdjacentHTML('beforeend', currentEl.outerHTML);
    });

}

选中此pen

将复选框选择合并到appendChild

2 个答案: