选中或取消选中复选框时执行操作

Question

我正在用 html 制作一个表单，表单的一个元素是复选框，询问用户是否有电话号码，我正在尝试执行两个操作：如果选中该复选框，我希望新的输入元素出现在同一个页面让用户输入他的电话号码，如果用户改变主意并尝试取消选中复选框，最后一个输入被删除，另一个输入出现另一个信息。当复选框被选中并且输入似乎让用户输入他的号码时，它对我有用，但是如果用户改变主意或错误地选中了这个复选框并取消选中它，数字的输入仍然在页面中，我意味着复选框中的取消选中事件在选中后不起作用！ 任何帮助请...

<html>
<head><script>
function change(n){
if (n.checked)
document.getElementById("message").innerHTML = "enter your number <input type="text" ....";
if (n.unchecked)
document.getElementById("message").innerHTML = "age <input type="text" ....";
}
</script>
</head>
<body><label><input type = "checkbox" onchange = "change(this)">Checkbox</label>
<div id="message"></div>
</body>

Answer 1

您只需要在this.checked值上this.checked一个if..else 。 所以像这样 -

document.querySelector('input[type="checkbox"]').addEventListener('change', function () {
    if (this.checked) {
        document.getElementById("message").innerHTML = 'enter your number <input type="text">';
    }
    else {
        document.getElementById("message").innerHTML = 'age <input type="text">';
    }
}, false);

工作演示

选中或取消选中复选框时执行操作

问题描述

1 个解决方案

解决方案1
1 2013-04-17 04:20:10

选中或取消选中复选框时执行操作

问题描述

1 个解决方案

解决方案1 1 2013-04-17 04:20:10

解决方案1
1 2013-04-17 04:20:10