ywork2020.com

Title

チェックボックスの値を操作する

checkedプロパティの概要

checkedプロパティはinput要素のcheckbox型とradio型で使われるプロパティです。
Webページに配置された、チェックボックスやラジオボタンがチェックされている状態かを調べることができます。 また、プログラムからチェックすることも可能です。

checkedプロパティに格納されている値はBoolean型とよばれ、trueとfalseの二者択一の値が入ります。 trueとは「真」という意味合いで、falseとは「偽」という意味合いになるので「真偽値」と言われることもあります。

チェックボックスのcheckedプロパティを参照したときに、チェックボックスがチェックされていれば「true」、チェックされていなければ「false」が返ってきます。

実機サンプル

答え: id="idAnswer"
innerText

実行: id="idCheckBox"
サンプルチェックボックス

サンプルコード

<body>
	<p>
		<samp id="idAnswer">innerText</samp>
	</p>
	<p>
		サンプルチェックボックス<input type="checkbox" id="idCheckBox" onchange="evtOnChange()">
	</p>
	<script type="text/javascript">
		document.open();
		function evtOnChange(){
			if(idCheckBox.checked==true){
				idAnswer.innerText = "true";
			}
			else{
				idAnswer.innerText = "false";
			}
		}
		evtOnChange()
		document.close();
	</script>
</body>

サンプルコードの要点

  1. プログラム結果の出力にsamp要素を配置して、id="idAnswer"の識別子を設定しています。
  2. input要素のcheckbox型を配置して、id="idCheckBox"の識別子を設定しています。
  3. チェックボックスにイベントハンドラ属性のonchangeイベントで「evtOnChange」関数を呼び出すようにしています。
  4. スクリプトで「evtOnChange」関数を作成して実行結果を出力しています。

サンプルコードの補足

checkedプロパティの値はBoolean型です。格納される値は真偽値(true,false)となりますので、if制御文を使って実行処理を2つに分けています。
if制御文に興味がある方は関連リンクを参照してください。