如何隐藏<span>标记并用javascript显示它

how to hide a <span> tag and show it with javascript

本文关键字：javascript 显示 span 隐藏 何隐藏      更新时间：2023-09-26

我有这个示例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在浏览器中打开代码，它会显示三个复选框和一个提交按钮在提交按钮下面有一个span text，写着

恭喜你!你已经完全完成了所有的任务

如果你选中>2个方框并点击提交，提交按钮下的文字会显示

你必须选中这三个方框才能继续

，如果你选中了所有3个方框，消息将再次变回:

恭喜你!你已经完全完成了所有的任务

我想做的是删除这句话:

恭喜你!你已经完全完成了所有的任务

，并且只在所有框都被选中并且提交按钮被单击时显示它，因为即使框未被选中也会显示

我想做的是删除这句话:"恭喜!你已经完全完成了所有的任务"，只有当所有的框都被选中并且提交按钮被点击时才显示它

使<span>为空:<span id="message"></span>。并让JavaScript在验证表单时填充它。

如果我想把一个链接与文本，我应该只是使用javascript字符串中的html锚标记吗?例:恭喜你!你已经完全完成了所有的任务，这里是链接

在这种情况下，在"congratulations…"中添加链接。文本，总是返回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;
}

看到工作演示代码。

相关文章：