Question

我坚持使用与复选框验证相关的简单JavaScript函数。如果选中cb1，我需要document.write，如果cb2，则需要相同。如果两个或其中一个未被检查，则不写任何内容。

<html>
<head>
<title>TEST PAGE</title>
    <script type="text/javascript" src="submit.js"></script>
</head>
<body>
    <div style="width:100%"><input type="checkbox" id="cb1"></div>
    <div style="width:100%"><input type="checkbox" id="cb2"></div>

    <div style="width:100%"><input type="submit" name="execute" id="execute" value="Execute" onClick="run();"></div>

</body>
</html>

submit.js

function run() {

    document.write('<div>' + "HERE GOES YOUR CHECKBOX CHOICE: " + '</div>');

    if(document.getElementById("cb1").checked == true) {
        document.write("This is check box 1");
    }
    if(document.getElementById("cb2").checked == true) {
        document.write("This is check box 2");
    }
}

Answer 1

这是一个改进的运行功能：

function run() {

    var snip = "<div>HERE GOES YOUR CHECKBOX CHOICE: </div>";

    if(document.getElementById("cb1").checked == true) {
        snip += "<br/>This is check box 1";
    }
    if(document.getElementById("cb2").checked == true) {
        snip += "This is check box 2";
    }
    document.write(snip);
}

在实际读取元素之前，每个人都发现了覆盖html的错误，因此这是导致错误的原因，清除DOM然后尝试读取不再存在的输入属性。

Answer 2

你不应该使用document.write。使用附加到标签像

$("#divid").append($("<input/>",{type:"checkbox",onclick:"yourfunction(this)"}));

Answer 3

在jquery使用.checked

中的javascript中使用.prop('checked')

function run() {    

if(document.getElementById("cb1").checked) {
    document.write("<div>This is check box 1</div>");
}
if(document.getElementById("cb2").checked) {
    document.write("<div>This is check box 2</div>");
}
}

Answer 4

if (document.getElementById('cb1').checked && document.getElementById('cb2').checked) {
    // both are checked
}
else {
   // only one or none are checked
}

正如前面一个答案中提到的那样，你不应该使用document.write。您可以使用.append(string)向文档中添加内容：

document.append('Both boxes are checked');

JavaScript复选框onclick函数

4 个答案: