SIerエンジョイ勢の雑記

日々の業務で学んだプログラミング知識や、Androidアプリ開発について書く予定です

【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チェックボックスにブランクを設定すると、チェックオンのときの送信値がブランクになってしまい 見た目上はチェックできているのに、値を送信できていないように見えてしまうということがあったので注意したい。