HTMLのチェックボックスのchecked属性の変更

チェックボックスの "checked"属性を変更することは可能でしょうか?そこで、HTML上でpreselectの値を変更したいのです。(後でJavaScriptのinnerHTMLで取得できるように)。

確かに、JavascriptでinnerHTMLを使用する場合、チェックボックスのビットをすべて再読み込みして、チェックするかしないかを決めることができます。 しかし、JSを使うのであれば、Javascriptの中でchecked属性を変更するのが一番簡単な方法です。

document.getElementById("myCheckboxId").checked = true;

編集

OK、では今後innerHTMLで再度取得できるようにする必要がありますね。 最初に書いたように、innerHTMLでチェックボックスも変更すればいいんですね。 ちょっとハック気味ですが、すでにやっているのであれば問題ないでしょう。

以下は、JSによるチェック・アンチェック、innerHTMLによるチェック・アンチェック、テスト用のinnerHTMLを取得するためのリンクがあるテスト用htmlページです。 innerHTMLの入れ替えを行うと、実は後でinnerHTMLで返される内容が変わってしまうのです&#8252。 ということでしょうか? 追記:うーん、今まで気づかなかったのですが、どうやらfirefoxが私のcheckedchecked="checked"に変えているようです、面白いですね。 ということは、view innerHTMLのリンクは、私にchecked="checked"を示し、チェックを外すと何も示さないということです。 Firebugでも、checked=""から何も表示されなくなるなど、若干異なりますが、変化が見られます。

[jsfiddleはこちら][1]です!

<span id="testdiv1"><input type="checkbox" name="heyhey" id="heyhey" CHECKED></span>
<p>
    <a href="#" onClick="document.getElementById('heyhey').checked = false;">uncheck via JS</a><br>
    <a href="#" onClick="document.getElementById('heyhey').checked = true;">check via JS</a><br>
    <a href="#" onClick="document.getElementById('testdiv1').innerHTML = '<input type=\'checkbox\' name=\'heyhey\' id=\'heyhey\' ';">uncheck via innerHTML swap</a><br>
    <a href="#" onClick="document.getElementById('testdiv1').innerHTML = '<input type=\'checkbox\' name=\'heyhey\' id=\'heyhey\' checked';">check via innerHTML swap</a><br>
    <a href="#" onClick="alert('innerHTML!: '+'\n\n'+getElementById('testdiv1').innerHTML)">view innerHTML</a>
</p>

ちゃんとエスケープできたかわかりませんが、うまくいきました。インラインでやらないのが一番です。

解説 (2)

相当するプロパティ (checked) ではなく、 setAttribute() の正当な使用法があるようですね。チェックボックスが checkbox という変数に格納されていると仮定すると、以下のようにして checked 属性をデフォルトでチェックされるように設定することができます。

checkbox.setAttribute("checked", "checked");

... そして、この属性を削除して、チェックボックスがデフォルトでチェックされないようにするには、次のようにします。

checkbox.removeAttribute("checked");

なお、これは古いIEでは正しく動作しません。IEは属性に関連するメソッドの実装が壊れています。

これについては、以前の質問に対する回答で詳しく書いています: https://stackoverflow.com/questions/3408150/add-attribute-checked-on-click-jquery/3409979#3409979

解説 (0)

はい、可能です。

checkboxObject.checked=true|false です。

解説 (0)