如何隐藏<span>标签并使用javascript显示</span>

Question

i have this sample html coding

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

and this is the 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;
}

If you open the code in the browser with JS, it will show you three checkboxes with a submit button and there is a span text under submit button saying

congratulations! you have completed all the tasks completely

If you check >2 boxes and click submit, the text under the submit button will say

You must check all three boxes to proceed

and if you check all 3 boxes the message will change again back to:

congratulations! you have completed all the tasks completely

what i want to do is remove the saying:

congratulations! you have completed all the tasks completely

and only show it when all the boxes are checked and submit button is click, since is showing even though boxes are not checked.

Answer 1

What I want to do is remove the saying: "congratulations! you have completed all the tasks completely" and only show it when all the boxes are checked and submit button is click

Make the <span> empty: <span id="message"></span> . And let the JavaScript fill it when you validate the form.

What if I wanna put a link with the text, should I just use the html anchor tag in the javascript string? EX: congratulations! you have completed all the task completely and here is the link

In that case, add the link in the "congratulations..." text and always return false so the form is never submitted.

and is there a javascript command that will get all the checkboxes on the page instead of putting each of their name, because I will create a huge checklist

Yes, there is. Here's the final code (verifying all checkboxes inside the myform form and adding the anchor tag to the resulting text):

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

See working demo code here .