如何隐藏<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;
}

在这里查看有效的演示代码 。