个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我们如何更新勾选复选框上的文本框？请参阅以下代码，单击复选框时只会填充“学校”。我想把勾选上的三个字全部填上。
<!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>
最佳答案
您的脚本是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(" ");
}
旁注#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" />
关于Javascript 更新勾选复选框上的文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9859396/
24
4
0
我是一名优秀的程序员,十分优秀！