Javascript 单击Span后切换复选框

我正在做一个作业，在输入div中单击span元素的文本时，需要在输出div中输出相同的文本。我已经成功地完成了这一部分，但在输入div中每个span元素的左侧是一个复选框，在单击所述span元素时也需要选中该复选框

我不允许将每个复选框作为其唯一ID的目标，因为我将在稍后按按钮和提示添加新的复选框和跨元素。这是一项关于活动委派的作业

然后，我需要能够取消选中复选框并删除附加的输出，但首先，我无法确定如何针对复选框。我能想到的唯一一件事是，不管点击了哪个span元素的索引号，都会是点击了哪个复选框的索引号，但我不确定这是否是最好的方法，也不确定如何去做

此外，此分配不应涉及任何JQuery。我的下一个项目实际上是在JQuery中重做这个任务。任何帮助都将不胜感激

HTML:

JS:

window.onload=UncheckAll；
函数UncheckAll（）{
var w=document.getElementsByTagName（'input'）；
对于（var i=0；i

就像我在这里做的那样，只需在复选框元素周围加上标签即可

请不要像这样写br元素，它的

没有斜杠

window.onload=UncheckAll；
函数UncheckAll（）{
var w=document.getElementsByTagName（'input'）；
对于（var i=0；i
#输入{
宽度：250px；
高度：300px；
浮动：左；
填充：20px 0 30px 15px；
边框样式：实心；
边框颜色：黑色；
边框宽度：1px；
}
.价值观{
显示：内联；
}
/*
#输入表格输入{
填充：20px 20px 20px 20px；
}
*/
#输出{
宽度：225px；
高度：326px；
浮动：左；
边框顶部：1件纯黑；
右边框：1px纯黑；
边框底部：1px纯黑；
填充：4px20px20px；
}

画布文档对象模型练习
苹果



芒果



葡萄



草莓的



樱桃
发布问题后，我意识到答案是使用.previousSibling和.nextSibling，因此我继续并完成了作业输入/输出部分的所有代码。然后，我意识到另一个人提到了。先前的兄弟姐妹在回应第一次的回答尝试。谢谢大家

window.onload = UncheckAll;
function UncheckAll() { 
    var w = document.getElementsByTagName('input'); 
    for (var i = 0; i < w.length; i++) { 
        if (w[i].type == 'checkbox') { 
            w[i].checked = false; 
        }
    }
}

document.getElementById("input").addEventListener("click", function(e){
    //Click Input Text - Box Checks and Output Text Appears
    if (e.target.nodeName === "SPAN") {
        if (e.target.previousSibling.checked === false) {
            var node = document.createElement("P");
            var textnode = document.createTextNode(e.target.innerHTML);

            node.appendChild(textnode);
            document.getElementById("output").appendChild(node);
            node.setAttribute("class", "outputItem")

            e.target.previousSibling.checked = true;
            return;
        }
    }

    //Click Input Text - Box Unchecks and Output Text Disappears
    if (e.target.nodeName === "SPAN") {
        if (e.target.previousSibling.checked === true) {
            for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
                if (e.target.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
                    document.getElementsByClassName("outputItem")[i].remove();
                    e.target.previousSibling.checked = false;
                    return;
                }
            }
        }
    }

    //Check Box - Output Text Appears
    if (e.target.type === "checkbox") {
        if (e.target.checked === true) {
            var node = document.createElement("P");
            var textnode = document.createTextNode(e.target.nextSibling.innerHTML);

            node.appendChild(textnode);
            document.getElementById("output").appendChild(node);
            node.setAttribute("class", "outputItem")
            return;
        }
    }

    //Uncheck Box - Output Text Disappears
    if (e.target.type === "checkbox") {
        if (e.target.checked === false) {
            for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
                if (e.target.nextSibling.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
                    document.getElementsByClassName("outputItem")[i].remove();
                    return;
                }
            }
        }

    }



});

window.onload=UncheckAll；
函数UncheckAll（）{
var w=document.getElementsByTagName（'input'）；
对于（var i=0；i#input {
    width: 250px;
    height: 300px;
    float: left;
    padding: 20px 0 30px 15px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

.values {
    display: inline;
}

/*
#input form input {
    padding: 20px 20px 20px 20px;
}
*/

#output {
    width: 225px;
    height: 326px;
    float: left;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 4px 20px 20px;
}

window.onload = UncheckAll;
function UncheckAll() { 
    var w = document.getElementsByTagName('input'); 
    for (var i = 0; i < w.length; i++) { 
        if (w[i].type == 'checkbox') { 
            w[i].checked = false; 
        }
    }
}

document.getElementById("input").addEventListener("click", function(e){
    if (e.target.nodeName === "SPAN") {
        var node = document.createElement("P");
        var textnode = document.createTextNode(e.target.innerHTML);

        node.appendChild(textnode);
        document.getElementById("output").appendChild(node);
        node.setAttribute("class", "outputItem")
    }
});

window.onload = UncheckAll;
function UncheckAll() { 
    var w = document.getElementsByTagName('input'); 
    for (var i = 0; i < w.length; i++) { 
        if (w[i].type == 'checkbox') { 
            w[i].checked = false; 
        }
    }
}

document.getElementById("input").addEventListener("click", function(e){
    //Click Input Text - Box Checks and Output Text Appears
    if (e.target.nodeName === "SPAN") {
        if (e.target.previousSibling.checked === false) {
            var node = document.createElement("P");
            var textnode = document.createTextNode(e.target.innerHTML);

            node.appendChild(textnode);
            document.getElementById("output").appendChild(node);
            node.setAttribute("class", "outputItem")

            e.target.previousSibling.checked = true;
            return;
        }
    }

    //Click Input Text - Box Unchecks and Output Text Disappears
    if (e.target.nodeName === "SPAN") {
        if (e.target.previousSibling.checked === true) {
            for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
                if (e.target.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
                    document.getElementsByClassName("outputItem")[i].remove();
                    e.target.previousSibling.checked = false;
                    return;
                }
            }
        }
    }

    //Check Box - Output Text Appears
    if (e.target.type === "checkbox") {
        if (e.target.checked === true) {
            var node = document.createElement("P");
            var textnode = document.createTextNode(e.target.nextSibling.innerHTML);

            node.appendChild(textnode);
            document.getElementById("output").appendChild(node);
            node.setAttribute("class", "outputItem")
            return;
        }
    }

    //Uncheck Box - Output Text Disappears
    if (e.target.type === "checkbox") {
        if (e.target.checked === false) {
            for (i = 0; i < document.getElementsByClassName("outputItem").length; i++) {
                if (e.target.nextSibling.innerHTML === document.getElementsByClassName("outputItem")[i].innerHTML) {
                    document.getElementsByClassName("outputItem")[i].remove();
                    return;
                }
            }
        }

    }



});