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

您需要if..else值this.checked。所以像这样 -

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);

<强> Working Demo

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

1 个答案: