Javascriptでcheckboxを表示するときに、checked="false"は意味がないという話

2021年4月11日

Javascript テクノロジー

t f B! P L
webサービス構築のスペシャリスト、弓削田です。 毎年、年間で10個以上のwebサービスを、人から頼まれたり、 自分で作りたいものを、作っているんですが、 今更ながら、HTMLのcheckboxに関して、知った内容をブログにまとめておきます。

form系タグ、使いこなしてますか?

webサービスで必ず必要になるタグとして、form系タグがあります。 form , input , select , textarea , button... などなど webプログラミング初心者の人であれば、この辺が苦手という人も多いと思います。 中でも、inputタグは、typeが様々あり、HTML5で膨大に増えたことから、 すべてを問題なく扱える人も、意外と少ないようです。 また、ブラウザによって、HTML5のレンダリングに差がでてしまい、 type="date"を、スマートフォンで見る場合と、PCブラウザで見る場合、また、それぞれのブラウザアプリの種類によって、 見え方が全く違うことも、初心者を惑わす要因になっています。

checkboxの未チェック状態

今回、僕が気がついた点として、input type="checkbox"というタグタイプですが、 とあるサイトを見ていた時に、次のように書かれていました。 <input type="checkbox" name="check" checked="true"> でも、リファレンスサイトなどを見ると、次のように書かれています。 <input type="checkbox" name="check" checked> checkedという属性(attribute)に対して、="true"という値を入れるかどうかというフォーマットですが、 結果的に、ブラウザでは、どちらの記述でも、チェック状態にレンダリングされます。 では、逆に、チェックさせない状態として、次の記述は、どのように表示されるでしょう? <input type="checkbox" name="check" checked="false"> trueの逆だから、falseという値でチェックされなくなるのかと思いきや、 思いっきり、チェックされてしまいます。 これは、HTMLの仕様が悪い点でもあるのですが、 このcheckboxのchecked属性は、 チェックするときに、checkedが記述されて、チェックされないときには、checkedは書かないというのが正解のようです。

Javascript対応

これを、javascriptで対応する場合に、 var elm_check = document.querySelector("input[type='checkbox']"); var check = true; elm_check.setAttribute("checked" , check); このように記述すると、trueでもfalseでも、チェックされてしまい、 トラブルの元になります。 これを回避するには、 var elm_check = document.querySelector("input[type='checkbox']"); var check = false; if(check === true){ elm_check.setAttribute("checked" ,""); } else if(elm_check.hasAttribute("checked")){ elm_check.removeAttribute("checked"); } という風にします。 めんどくさいようですが、コレはコレ、仕様と思って覚えておきましょう。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ