HTML DOM 入力チェックボックスの value プロパティとは？構文と使い方を解説
HTML DOM の Input Checkbox（チェックボックス）の value プロパティは、input 要素（type="checkbox"）の value 属性に設定された値を文字列として返します。さらに、新しい文字列を代入することで、value 属性の値を後から変更することも可能です。
構文
value プロパティの基本的な構文は以下のとおりです。
値を取得する場合
inputCheckboxObject.value
値を設定する場合
inputCheckboxObject.value = 'String'
サンプルコード
それでは、Input Checkbox の value プロパティを使った具体的な例を見ていきましょう。次の例では、チェックボックスの value の初期値を画面に表示し、ボタンのクリック操作によって値を変更しています。
<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
var valueOfInput = document.getElementById("formCheckbox");
var displayDiv = document.getElementById("displayDiv");
displayDiv.textContent = 'Value: ' + valueOfInput.value;
function changeType(){
if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
valueOfInput.value = 'Red';
displayDiv.textContent = 'Value: ' + valueOfInput.value;
} else {
displayDiv.textContent = 'Check the checkbox to change value to red';
}
}
</script>
</body>
</html>
コードの解説
- ページの読み込み時には、チェックボックスの現在の value の値（この例では「Green」）が displayDiv 内に表示されます。
- ボタンをクリックすると changeType() 関数が呼び出され、チェックボックスがチェック済みかつ value が「Green」である場合にのみ、値が「Red」に変更されます。
- 条件を満たしていない場合は、チェックボックスのチェックを促すメッセージが代わりに表示される仕組みです。
実行結果
このコードを実行すると、以下のように表示されます。
「Change value of input checkbox」ボタンをクリックする前 −
「Change value of input checkbox」ボタンをクリックした後 −
「Color-Red」チェックボックスにチェックを入れ、「Change value of input checkbox」ボタンをクリックした場合 −
-
HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Input URL value プロパティは、type=url が指定された input 要素の value 属性が定義されている場合に、その値を文字列として返します。さらに、新しい文字列を代入することで、ユーザー側から値を設定（変更）することも可能です。 構文 value プロパティの構文は以下のとおりです。 値を取得する場合 inputURLObject.value 値を設定する場合 inputURLObject.value = 文字列 使用例 Input URL value プロパティの具体的な使い方を、サンプルコードで確認してみましょう。 <!DOCTYPE
-
HTML DOM Input Week の value プロパティの使い方を解説
Input Week の value プロパティとはHTML DOM の Input Week value プロパティは、<input type=week> で作成された入力フィールドの value 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、週の値を動的に変更することも可能です。value の値は「YYYY-Www」という形式（例：2021-W35）で表され、年と、その年の何週目にあたるかを組み合わせた文字列になります。構文value プロパティの基本的な構文は以下のとおりです。値を取得する（文字列を返す）inp