[JavaScript] createElement したチェックボックスの checked属性 の指定が IE6 で反映されない

これはかなりメジャーな話だと思いますが、
過去のライブラリを修正していて対応していないモノを発見してしまったので自分への戒めとして。

IE6 で想定した動作をしない例

JavaScript で デフォルトでチェックが入っているチェックボックスを生成する場合、
次のようにすると IE6 ではデフォルトチェックが入らない。

var input = document.createElement('input');
input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox';
input.setAttribute('checked', 'checked'); // [or] input.checked = true;
document.body.appendChild(input);

IE6 で想定した動作をさせる例

IE6(恐らくIE7も) では、createElement した input要素 を body要素(若しくはその子要素) に append する前の段階で checked属性 をセットしても反映されません。
そのため、想定した動作をさせるためには以下の例のようなタイミングで checked属性 をセットする必要があります。

var input = document.createElement('input');
input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox';
document.body.appendChild(input);
input.setAttribute('checked', 'checked'); // [or] input.checked = true;

今更 IE6 対応の話かよって感じですが、気をつけろ。そして忘れるな。自分。

投稿日付 :

カテゴリー : JavaScript

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/191

コメント投稿フォーム