HTML DOM Input Checkbox の type プロパティの使い方をわかりやすく解説
HTML DOM の Input Checkbox（type="checkbox"）における type プロパティは、対象の入力要素がどのタイプ（checkbox、radio、text など）であるかを示す値を取得・設定するためのプロパティです。JavaScript から動的にフォーム部品の種類を確認したり変更したりしたい場合に活用できます。
構文
type プロパティの基本的な構文は次のとおりです。
値を取得する場合（文字列値を返す）
inputCheckboxObject.type
値を設定する場合（文字列値を代入）
inputCheckboxObject.type = stringValue
設定できる文字列値
「stringValue」には、以下のいずれかの値を指定できます。
| stringValue | 説明 |
|---|---|
| checkbox | 入力タイプがチェックボックスであることを表します |
| radio | 入力タイプがラジオボタンであることを表します |
| text | 入力タイプがテキストフィールドであることを表します |
サンプルコード
それでは、Input Checkbox の type プロパティを使用した具体的な例を見てみましょう。このサンプルでは、ボタンをクリックするとチェックボックスがテキストフィールドへと変化し、現在のタイプが画面に表示されます。
<!DOCTYPE html>
<html>
<head>
<title>チェックボックスのtype属性</title>
</head>
<body>
<form id="Form">
<div>
その他： <input id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">入力タイプを変更</button>
<div id="displayDiv"></div>
<script>
var typeOfInput = document.getElementById("formCheckbox");
var displayDiv = document.getElementById("displayDiv");
displayDiv.textContent = '入力タイプ: ' + typeOfInput.type;
function changeType(){
if(typeOfInput.type == 'checkbox'){
typeOfInput.type = 'text';
displayDiv.textContent = '入力タイプ: ' + typeOfInput.type;
}
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような画面が表示されます。
「入力タイプを変更」ボタンをクリックする前 −
「入力タイプを変更」ボタンをクリックした後 − チェックボックスがテキストフィールドに変化していることが確認できます。
まとめ
type プロパティを使えば、JavaScript だけでフォーム要素の種類を実行時に参照・変更できます。ユーザーの操作に応じてチェックボックスをテキスト入力欄に切り替えるなど、柔軟な UI を実装したい場面で役立つ便利なプロパティなので、ぜひ活用してみてください。
-
HTML DOM Input Number type プロパティとは？使い方をわかりやすく解説
HTML DOM の Input Number type プロパティは、type 属性が「number」に設定された input 要素に関連付けられたプロパティです。このプロパティは、数値入力フィールド（<input type=number>）に対して常に文字列「number」を返します。JavaScript でフォーム要素の種類を動的に確認したい場合などに役立ちます。 構文 Input Number type プロパティの構文は以下のとおりです。 numberObject.type サンプルコード HTML DOM Input Number type プロパティの具体的な使用
-
HTML DOM Input Reset typeプロパティとは?使い方をわかりやすく解説
HTML DOMのInput Resetオブジェクトのtypeプロパティは、type=resetが設定されたinput要素(リセットボタン)に関連付けられています。このプロパティは、リセットボタン要素に対して常に「reset」という文字列を返します。 構文 reset typeプロパティの基本的な構文は以下の通りです。 resetObject.type サンプルコード それでは、reset typeプロパティの具体的な使用例を見ていきましょう。 <!DOCTYPE html> <html> <body> <h1>Input reset type