Question

我正在进行一项任务，在输入div中单击span元素的文本时，需要在输出div中输出相同的文本。那部分我已经成功完成了，但是在输入div中每个span元素的左边是一个复选框，需要在点击所述span元素时进行检查。

我不允许使用自己的唯一ID定位每个单独的复选框，因为稍后我会在按下按钮和提示时添加更新的复选框和span元素。这是关于事件委托的任务。

然后我需要能够取消选中复选框并删除附加的输出，但首先，我无法弄清楚如何定位复选框。我唯一能想到的是以某种方式说，点击所述span元素的索引号将是所述复选框的索引号被点击，但我不确定这是否是最好的方法以及如何去做这样做。

此外，此作业不应包含任何JQuery。我的下一个项目实际上是在JQuery中重做这个赋值。任何帮助将不胜感激！

HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Canvas Document Object Model Exercise</title>
    <link rel="stylesheet" href="canvas_stylesheet.css">
</head>

<body>
    <div id="input">
        <form>
            <input class="checkbox" type="checkbox"><span class="values">Apple</span></br></br>
            <input class="checkbox" type="checkbox"><span class="values">Mango</span></br></br>
            <input class="checkbox" type="checkbox"><span class="values">Grape</span></br></br>
            <input class="checkbox" type="checkbox"><span class="values">Strawberry</span></br></br>
            <input class="checkbox" type="checkbox"><span class="values">Cherry</span>
        </form>
    </div>

    <div id="output"></div>

CSS：

#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;
}

JS：

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")
    }
});

Answer 1

只需用标签包围您的复选框元素，就像我在这里做的那样。

Ps：plese从不写一个像这个</br>的br元素，它的<br>根本没有斜线

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")
    }
});

#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;
}

<!DOCTYPE html>
<html>

<head>
    <title>Canvas Document Object Model Exercise</title>
    <link rel="stylesheet" href="canvas_stylesheet.css">
</head>

<body>
  <div id="input">
    <form>
      <label>
        <input class="checkbox" type="checkbox"><span class="values">Apple</span>
      </label>
      <br><br>
      <label>
        <input class="checkbox" type="checkbox"><span class="values">Mango</span>
      </label>
      <br><br>
      <label>
        <input class="checkbox" type="checkbox"><span class="values">Grape</span>
      </label>
      <br><br>
      <label>
        <input class="checkbox" type="checkbox"><span class="values">Strawberry</span>
      </label>
      <br><br>
      <label>
        <input class="checkbox" type="checkbox"><span class="values">Cherry</span>
      </label>
    </form>
  </div>
  <div id="output"></div>
</body>
</html>

Answer 2

我意识到答案是在发布问题后使用.previousSibling和.nextSibling，所以我继续完成了分配的输入/输出部分的所有代码。然后，我意识到有人提到.previousSibling以回应第一次回答尝试。谢谢大家！

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

    }



});

单击Span后切换复选框

2 个答案: