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") および string concat の html 閉じ括弧の後に括弧がありません:

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