HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Checkbox の required プロパティの使い方

HTML DOM の Input Checkbox required プロパティは、フォームを送信する際にチェックボックスのチェックが必須かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、ユーザーが必ずチェックボックスを確認してからフォームを送信するように制御できます。

構文

required プロパティの基本的な構文は以下のとおりです。

値を取得する場合(真偽値 true / false を返す)

inputCheckboxObject.required

値を設定する場合

inputCheckboxObject.required = booleanValue

設定できる真偽値

「booleanValue」には以下のいずれかの値を指定できます。

booleanValue説明
trueフォームを送信するには、チェックボックスへのチェックが必須であることを示します。
falseデフォルト値です。チェックは必須ではなく、未チェックのままでもフォームを送信できます。

サンプルコード

ここで、Input Checkbox required プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Required Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Check me ! I am required: <input id="formCheckbox" type="checkbox" name="formCheckbox" required>
</div>
</form>
<button onclick="getRequiredStatus()">Check if form is submittable</button>
<div id="displayDiv"></div>
<script>
   function getRequiredStatus(){
      var requiredBool = document.getElementById("formCheckbox");
      var displayDiv = document.getElementById("displayDiv");
      if(requiredBool.required == false || (requiredBool.required == true && requiredBool.checked == true)){
         displayDiv.textContent = 'Required attribute of checkbox: '+requiredBool.required + ', form is submittable ';
      } else {
         displayDiv.textContent = 'Check the checkbox'+ ', current value of required attribute: '+requiredBool.required ;
      }
   }
</script>
</body>
</html>

このサンプルでは、チェックボックスに required 属性が設定されています。「Check if form is submittable(フォームが送信可能か確認)」ボタンをクリックすると、JavaScript の getRequiredStatus() 関数が実行され、required プロパティの値とチェック状態を判定した結果が画面に表示されます。

  • required が false の場合、または required が true かつチェックボックスがチェック済みの場合 → 「フォームは送信可能」と表示されます。
  • required が true かつ未チェックの場合 → 「チェックボックスをチェックしてください」というメッセージと、現在の required 属性の値が表示されます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

チェックボックスが未チェックの状態で「Check if form is submittable」ボタンをクリックした場合:

HTML DOM Input Checkbox の required プロパティの使い方

チェックボックスがチェック済みの状態で「Check if form is submittable」ボタンをクリックした場合:

HTML DOM Input Checkbox の required プロパティの使い方

このように、required プロパティを使えば、JavaScript から動的にチェックボックスの必須設定を取得・変更でき、フォームの入力バリデーションを柔軟に実装することができます。

  1. HTML DOM ラジオボタンの required プロパティとは？構文と使い方を解説

    HTML DOM の input radio における required プロパティは、<input> 要素の required 属性に関連付けられたプロパティで、フォームをサーバーへ送信する前にラジオボタンの選択が必須かどうかを設定・取得するために使用されます。required 属性が付いたラジオボタンが未選択のままの場合、ユーザーがフォームを送信しようとしても送信は実行されません。 構文 required プロパティを設定する場合の構文は以下のとおりです。 radioObject.required = true|false true を指定するとフォーム送信前にラジオボタンの選

  2. HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals