【JavaScript】チェックボックス、ラジオボタンのクリアはなぜ「checked=false」を設定するのか
はじめに
HTMLとJavaScriptを開発をしている人なら何となくわかると思うが チェックボックスやテキストボックスの値をクリアする機能を作成したとする。
その時にチェックボックス、ラジオボタンに対して「value=""」と実装するのはコーディング誤りとなってしまう。
サンプル画面
氏名
男性女性
学生
サンプルコード
下記ソースをローカルで「拡張子：html」などで保存して、試してみる。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"/> <p>氏名<input name="textbox_name" type="textbox" /></p> <p>男性<input name="radio_gender" type="radio" value="1" />女性<input name="radio_gender" type="radio" value="2" /></p> <p>学生<input name="checkbox_student" type="checkbox" value="123" /></p> <p><input id="clear_button" name="clearValue_button" onclick="clearValues()" type="button" value="クリア" /></p> <script type="text/javascript">// <![CDATA[ function clearValues() { alert("testmesseage"); document.getElementsByName('textbox_name').item(0).value = ""; document.getElementsByName('radio_gender').item(0).checked = false; document.getElementsByName('checkbox_student').item(0).checked = false; document.getElementsByName('checkbox_student').item(0).value = ""; }; // ]]> </script>
なぜcheckedに設定するのか
チェックボックスやラジオボタンは「属性：checked」によって選択されているかどうかを判断しており、 「checked=true」のときに設定されている「属性：value」を送信するようになっている。 そのため、
テキストボックスのクリアに対しては「value=""」の設定で良いが、
チェックボックス、ラジオボタンに対して「value=""」を設定しても動作しないということになる。
⇒自分の体験だが、IEでチェックボックスにブランクを設定すると、チェックオンのときの送信値がブランクになってしまい 見た目上はチェックできているのに、値を送信できていないように見えてしまうということがあったので注意したい。
