【Javascript】複数のチェックボックスの全選択・全解除

入力フォームでよくある、全選択・全解除のチェックボックスのサンプルです。

色んな方法がありますが、今回は<input>の属性nameが全て同じだった場合を記載しています。

参考ページに色んな方法が書いてあるので、状況に応じて使いこなしてみてください。

---

全て選択

TEST1 TEST2 TEST3 TEST4

<form name="form">
  <label>
    <input type="checkbox" name="all" onClick="AllChecked();" />全て選択
  </label>
  <p>
    <label>
      <input type="checkbox" name="test" value="TEST1" onClick="DisChecked();" />TEST1
    </label>
    <label>
      <input type="checkbox" name="test" value="TEST2" onClick="DisChecked();" />TEST2
    </label>
    <label>
      <input type="checkbox" name="test" value="TEST3" onClick="DisChecked();" />TEST3
    </label>
    <label>
      <input type="checkbox" name="test" value="TEST4" onClick="DisChecked();" />TEST4
    </label>
  </p>
</form>

<script language="JavaScript" type="text/javascript">
<!--
  // 「全て選択」チェックで全てにチェック付く
  function AllChecked(){
    var all = document.form.all.checked;
    for (var i=0; i<document.form.test.length; i++){
      document.form.test[i].checked = all;
    }
  }

  // 一つでもチェックを外すと「全て選択」のチェック外れる
  function　DisChecked(){
    var checks = document.form.test;
    var checksCount = 0;
    for (var i=0; i<checks.length; i++){
      if(checks[i].checked == false){
        document.form.all.checked = false;
      }else{
        checksCount += 1;
        if(checksCount == checks.length){
          document.form.all.checked = true;
        }
      }
    }
  }
// -->
</script>

参考

複数のチェックボックスを同時にチェックする 全選択チェックボックス - [サンプルコード /JavaScript] ぺんたん info

メールアドレス入力フォームでの値の比較・確認

「メールアドレス」と「確認用メールアドレス」の入力値を照らし合わせて、一致しなかった場合はエラーメッセージを出すという、入力フォームでよくある機能のサンプルを2パターン記載します。

どちらもJavaScriptを使用するんですが、エラーメッセージの出し方を変えています。 状況に応じて使い分けてみてください。

サンプル1

エラーメッセージをJavaScriptのアラートで表現したパターンです。 こっちの方がコード的には簡単です。

メール:

メール確認用:

<form onSubmit="return CheckEmail_1()">
  <div>
    <label for="email_1">メール:</label>
  </div>
  <div>
    <input type="email" id="email_1" required>
  </div>
  <div>
    <label for="emailConfirm_1">メール確認用:</label>
  </div>
  <div>
    <input type="email" id="emailConfirm_1" required>
  </div>
  <p>
    <input type="submit" id="submit">
  </p>
</form>

<script language="JavaScript" type="text/javascript">
<!--
  function CheckEmail_1() {
    //IE対応の為変更
    //var mail = email_1.value; //メールフォームの値を取得
    //var mailConfirm = emailConfirm_1.value; //メール確認用フォームの値を取得
    var mail = document.getElementById("email_1").value; //メールフォームの値を取得
    var mailConfirm = document.getElementById("emailConfirm_1").value; //メール確認用フォームの値を取得
    // パスワードの一致確認
    if (mail != mailConfirm){
      alert("パスワードと確認用パスワードが一致しません"); // 一致していなかったら、エラーメッセージを表示する
      return false;
    }else{
      return true;
    }
  };
// -->
</script>

アラート表示-JavaScript入門

サンプル2

こちらはエラーメッセージをHTML5の入力チェック方式で表現したパターンです。 他の値もHTML5で入力チェックをしていた場合は、こちらの方がメッセージの形式に統一感があるので見栄えがいいです。

メール:

メール確認用:

<form>
  <div>
    <label for="email_2">メール:</label>
  </div>
  <div>
    <input type="email" id="email_2" required />
  </div>
  <div>
    <label for="emailConfirm_2">メール確認用:</label>
  </div>
  <div>
    <input type="email" id="emailConfirm_2" required oninput="CheckEmail_2(this)" />
  </div>
  <p>
    <input type="submit" id="submit">
  </p>
</form>

<script language="JavaScript" type="text/javascript">
<!--
  function CheckEmail_2(input){
    //IE対応の為変更
    //var mail = email_2.value; //メールフォームの値を取得
    var mail = document.getElementById("email_2").value; //メールフォームの値を取得
    var mailConfirm = input.value; //メール確認用フォームの値を取得(引数input)

    // パスワードの一致確認
    if(mail != mailConfirm){
      input.setCustomValidity('メールアドレスが一致しません'); // エラーメッセージのセット
    }else{
      input.setCustomValidity(''); // エラーメッセージのクリア
    }
  }
// -->
</script>

制約 - フォーム - HTML要素 - HTML5 タグリファレンス - HTML5.JP