如何隱藏<span>標簽並使用javascript顯示</span>

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

在這里查看有效的演示代碼 。