Question

我们如何在勾选复选框时更新文本框？请参阅以下代码，单击复选框时，只有“学校”填写。我想在滴答声中填写所有三个字。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatebox()
{
    var textbox = document.getElementById("list")
    textbox.value =  ""

    if(document.getElementById('cb2').checked) {
        textbox.value = "School"
    }

    if(document.getElementById('cb3').checked) {
            textbox.value =  textbox.value + " College "
        }

    if(document.getElementById('cb4').checked) {
            textbox.value =  textbox.value + " University"
        }
}
</script>
</head>
<body>
<input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School <br />
<input id="cb3 "type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />
<input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University<br />
<input id="list" type="text" name="list" />

</body>
</html>

Answer 1

您的脚本为throwing an error，因为您没有名为"cb3"的复选框（因为您的HTML中存在拼写错误，它被称为"cb3 " - 最后的空格 - 或者根本没有ID [ID中的spaces are not valid]，具体取决于浏览器）。没有拼写错误，它mostly works as you intended虽然如果学校没有被选中，你会在开始时获得一个空间，如果大学没有被选中，但是大学就是，那么你最后会得到一个空间。

附注＃1：您的代码依赖于Automatic Semicolon Insertion的恐怖。我强烈建议不依赖它。始终包括所有必需的分号。

附注2：如果没有勾选“学校”，有很多方法可以避免占用空间。最简单的方法之一是使用数组和Array#join空格作为分隔符，就像这样（我还添加了分号）：

function updatebox()
{
    var textbox = document.getElementById("list");
    var values = [];

    if(document.getElementById('cb2').checked) {
        values.push("School");
    }

    if(document.getElementById('cb3').checked) {
        values.push("College");
    }

    if(document.getElementById('cb4').checked) {
        values.push("University");
    }

    textbox.value = values.join(" ");
}

Live example | source

附注3：label elements允许点击标签以及实际框，使复选框更容易使用：

<label><input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School</label><br />
<label><input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College</label><br />
<label><input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University</label><br />
<input id="list" type="text" name="list" />

Live example | source

Answer 2

您在定义cb3：

的行上输入了拼写错误

<input id="cb3 "type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />

应该是

<input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />

此外，您应该使用分号来完成Javascript语句。

更正后的代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatebox()
{
    var textbox = document.getElementById("list");
    textbox.value = "";

    if(document.getElementById('cb2').checked) {
        textbox.value = "School";
    }

    if(document.getElementById('cb3').checked) {
            textbox.value =  textbox.value + " College ";
        }

    if(document.getElementById('cb4').checked) {
            textbox.value =  textbox.value + " University";
        }
}
</script>
</head>
<body>
<input id="cb2" type="checkbox" name="vehicle" value="School" onclick="updatebox()" /> School <br />
<input id="cb3" type="checkbox" name="vehicle" value="College" onclick="updatebox()" /> College<br />
<input id="cb4" type="checkbox" name="vehicle" value="University" onclick="updatebox()" /> University<br />
<input id="list" type="text" name="list" />

</body>
</html>

在勾选复选框时更新文本框的Javascript

2 个答案: