javascript - 复选框更新

Question

我正在尝试更新一些文本以说明是否选中了复选框。唯一的问题是，当它被选中时，文本框消失了，文本替换了它。

<form name="form" id="form">
    <input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>

<script type="text/javascript">
    function check() {
        document.write("checked: " + document.form.cb.checked);
    }
</script>

Answer 1

您看到的是使用 document.write 的副作用。它正在用您正在编写的文本替换文档的整个正文。尝试做这样的事情。

<form name="form" id="form">
    <input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>

<div id="cb-status">checked: false</div>

<script type="text/javascript">
    function check() {
        document.getElementById('cb-status').innerHTML = "checked: " + document.form.cb.checked;
    }
</script>

Answer 2

您可以使用 jQuery 让事情变得更容易：

考虑到您有一个复选框：

<input type="checkbox" >

还有一个 id=message 的 span 元素：

<span id="message"></span>

然后，当您单击复选框时，无论是否选中，它将在跨度中“写入”。

$("document").ready(function(){
    $(":checkbox").click(function(){
       $("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
    });
});

在 jsFiddle 中查看：http: //jsfiddle.net/WNDUH/3/

Answer 3

is(":checked") 和字符串连接的 html 右括号后缺少括号：

$(":checkbox").click(function(){
     $("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
});