复选框更新

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 =消息span元素：

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

然后，当你点击一个复选框时，如果选中或不选中，它将在范围中“写入”。

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

见它的jsfiddle：HTML右括号后http://jsfiddle.net/WNDUH/3/

Answer 3

支架缺失是（ “：勾选”）和字符串连接：

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