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

html结束括号后的括号丢失（“：checked”）和字符串concat：

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

复选框更新

3 个答案: