input type="checkbox"の概要
チェックボックスを作成するには、input要素のtype属性にcheckboxを指定します。 チェックボックスの選択項目は複数個作成して、ユーザーはその項目の中からいくつかを選択しチェックする事ができます。
実機サンプル
チェックボックスにチェックすることができます。
ここがinnerHTML
サンプルコード
<body>
<input type="checkbox" id="idCBox" onclick="evtClick()">
<p id="idYesNo">ここがinnerHTML</p>
<script>
function evtClick(){
if(idCBox.checked==true){
idYesNo.innerHTML="YES!";
}
else{
idYesNo.innerHTML="NO!";
}
}
</script>
</body>
input type="checkbox"のサンプルコードの説明
- input要素のtype属性に"checkbox"を設定します。
- 1項のinput要素にid属性で任意のid名を指定します。[ ここでは"idCBox" ]
- 1項のinput要素にonclick属性でクリックした時に発生する任意のイベント名を指定します。[ ここでは"evtClick()" ]
- 結果を表示するための任意の要素を作成します。[ ここではp要素 ]
- 前項の要素にid属性で任意のid名を指定します。[ ここでは"idYesNo" ]
- script要素を設置し、その要素内にプログラムを書いていきます。[ <script>~</script> ]
- function evtClick()でチェックを入れた時に実行される処理を作成します。[イベント名="evtClick()"]
- チェックボックスのcheckedプロパティを比較演算子を使い ifステートメント で条件分岐処理させています。
詳細は下記の関連リンクをご参照ください。