如何隱藏<span>標籤，並用JavaScript

Question

表現出來我有這個樣本HTML編碼

<form id = "myform" onsubmit = "return checkcheckboxes()"> 
task 1</task><input type = "checkbox" name = "chk1"></br> 
task 2<input type = "checkbox" name = "chk2"></br> 
task 3<input type = "checkbox" name = "chk3"></br></br> 
<input type = "submit" value = "Go to the next task"></br> 
<span id = "message" >congratulations! you have completed all the task completely</span> 
</form> 

，這是JS

function checkcheckboxes() { 
document.getElementById("message").innerHTML = ""; 
var valid = true; 
var f = document.getElementById("myform"); 
if (f.chk1.checked == false) {valid = false} 
if (f.chk2.checked == false) {valid = false} 
if (f.chk3.checked == false) {valid = false} 
if (!valid) {document.getElementById("message").innerHTML = "You must check all three boxes to proceed"}; 
return valid; 
} 

如果您在與JS瀏覽器中打開的代碼，它會向你展示三個複選框，提交按鈕，並有一個跨文本提交按鈕說

恭喜！你已經完成了完全

所有任務如果選中> 2盒，然後點擊提交，提交按鈕下的文本會說

您必須檢查所有三個箱子進行

如果你檢查所有3個盒子，信息會再次變回：

祝賀你！你已經完成了所有的任務完全

我想做的事就是刪除俗話說：

祝賀！您已完成所有任務

並且僅當所有框被選中並且點擊提交按鈕時才顯示，因爲即使未檢查框也會顯示。

Answer 1

我想要做的是去除俗話說：「恭喜！你已經完成了所有的任務完全」 ，只顯示它在所有的複選框被選中，並提交按鈕被點擊

使<span>爲空：<span id="message"></span>。當您驗證表單時，讓JavaScript填寫它。

如果我想把一個鏈接與文本，我應該只是在javascript字符串中使用html錨標記？ EX：恭喜！你已經完全完成了所有的任務，這裏是鏈接

在這種情況下，添加鏈接的「恭喜......」文字和始終返回false這樣的形式從未提交。

，是有一個JavaScript命令，將得到的頁面，而不是把他們的每一個名字上的所有複選框，因爲我將創建一個巨大的清單

是的，有。下面是最終代碼（驗證所有的複選框的myform表單中，添加錨標記生成的文本）：

function checkcheckboxes() { 
    var valid = true; 
    var inputs = document.getElementById("myform").getElementsByTagName("input"); 
    for (var i = 0; i < inputs.length; i++) { 
     if (inputs[i].type == "checkbox") { 
      if (!inputs[i].checked) { 
       valid = false; 
       break; // break as soon as it finds an unchecked 
      } 
     } 
    } 
    if (!valid) { 
     document.getElementById("message").innerHTML = "You must check all boxes to proceed"; 
    } else { 
     document.getElementById("message").innerHTML = "congratulations! you have completed all the tasks completely and <a href='http://www.google.com'>here is the link</a>."; 
    } 
    return false; 
} 

見working demo code here。