webサービス構築のスペシャリスト、弓削田です。
毎年、年間で１０個以上の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");
}
という風にします。
めんどくさいようですが、コレはコレ、仕様と思って覚えておきましょう。
