單擊Span時切換複選框

我正在處理一個分配，需要單擊輸入div中的span元素文本時，在輸出div中輸出相同的文本。該部分我已經成功完成了，但是在輸入格中的每個span元素的左邊是一個複選框，在單擊所述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") 
    } 
});

來源

2017-06-21 Andrew

*「在某種程度上說，被點擊說span元素的任何索引號會被人說複選框的索引號點擊」 * - 這將工作，或顯示您可以使用特定HTML的['。 previousSibling'屬性]（https://developer.mozilla.org/en/docs/Web/API/Node/previousSibling）（即'e.target.previousSibling.checked = true'）。 – nnnnnn

這就在這裏！我恍然大悟，在實際閱讀之前意識到這一點並完成了這項任務的輸入/輸出部分。我想我爲自己感到驕傲，但我也很高興看到答案是張貼的情況下，我沒有頓悟哈哈。謝謝！ – Andrew

剛好圍繞你的複選框元素與標籤，像我一樣在這裏。

PS：普萊舍從來沒有在所有

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>

來源

2017-06-21 03:07:59

*「這是關於事件委託的任務。」* - OP正在嘗試使用JS來完成此任務。使用標籤適用於這種特定情況，但並不能解決來自JS的事件委託和DOM導航的更一般原則。 – nnnnnn

@nnnnnn我有不同的看法，我認爲他在談論創作投入時的話題，我真的相信我的解決方案可以爲他工作。 –

根據我引用的文字，問題明確指出，該作業屬於事件委派。所以是的，你的解決方案適用於這個特定的例子（正如我已經說過的），但是對於總體原則並沒有真正的幫助。 – nnnnnn

這樣寫</br>，其<br>沒有斜槓br元素，我意識到答案是張貼後使用.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; 
       } 
      } 
     } 

    } 



});

來源

2017-06-21 03:50:03 Andrew

單擊Span時切換複選框

回答

相關問題