.checked

JavaScriptの.checkedでチェックボックスへ事前にチェックを入れて表示

2022年3月26日2022年4月9日 5分

チェックボックスの生成時点で、JavaScriptを使い「チェックを入れた状態」で生成させます。

かかかず

この記事は、PardotのようなMAツールでチェックボックスを使う時に使えるスニペットです。・・・。結構マニアックなネタです。

HTMLでcheckedをつける場合のサンプル
- HTML
JavaScriptでcheckedをつける場合のサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

HTMLでcheckedをつける場合のサンプル

JavaScriptを使わず、HTMLのみで事前にチェックを入れて表示させた場合のサンプルです。

2022年4月5日(火)

これといっての「何か」はないので、説明は割愛します。ぽちぽちクリックするとチェックを入れたり・外したりもできます。

HTML

要素の生成時点でチェックを入れるには、HTMLの input タグに「checked」と記述してあげればOKです。

<div class="checkBlockOne">
  <input id="sampleCheck" type="checkbox" checked><label for="sampleCheck">2022年4月5日(火)</label>
</div>

かかかず

ただ単にこれだけでOKです。なのでめちゃ簡単です。

JavaScriptでcheckedをつける場合のサンプル

次に、HTMLのタグ内に「checked」を付けず、JavaScriptで「checked」を付ける場合のサンプルです。

2022年4月5日(火)

このように、チェックマークがページを開いた時に付きます。そしてさらに、チェックの取り外しを無効にしてしまうJavaScriptのコードも記述しているサンプルです。

かかかず

HTML側でチェックボックスを事前に付けて制御できない場合に使えます。

実装の手順と方法

スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。

HTMLの記述

まずは、HTMLを設置したい場所に記述します。

コードの表示

<div class="checkBlockTwo">
  <input id="sampleCheckTwo" type="checkbox"><label for="sampleCheckTwo">2022年4月5日(火)</label>
</div>

非常にシンプルなコードです。

JavaScriptの記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードの表示

document.addEventListener('DOMContentLoaded', function() {
  const checkBlock = document.querySelector(`.checkBlockTwo`);
  const checkBox = document.querySelector(`.checkBlockTwo input[type='checkbox']`);
  checkBox.checked = true;
  checkBox.disabled = true;
  checkBlock.style.pointerEvents="none";
});

CSSの記述

最後にCSSの記述です。

コードの表示

/* チェックボックス */
.entry-content input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font-family: 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.entry-content input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.entry-content input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #313131;
  position: absolute;
  left: 0;
  top: 7px;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.entry-content input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: 4px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

この記事のサンプルの見た目を使う場合は以下のコードを記述ください。

ざっくりとしたコードの解説

このコードについて解説します。

HTML

HTMLは、以下のようなシンプルな記述です。

<div class="checkBlockTwo">
  <input id="sampleCheckTwo" type="checkbox"><label for="sampleCheckTwo">2022年4月5日(火)</label>
</div>

かかかず

HTMLだけの場合と比較して input タグに「checked」がついていないのがこっちのHTMLの特徴です。

JavaScript

JavaScriptははじめに、チェックボックスを格納している「checkBlockTwo」の div タグと、チェックボックスのインプットがある2つの要素を取得します。

そして取得した「checkBlockTwo」の div タグには「pointerEvents」のプロパティでクリックできないようにして、チェックボックスの input タグには「checked」でチェックを付け、「disabled」も付け選択できないようにしています。

document.addEventListener('DOMContentLoaded', function() {
  const checkBlock = document.querySelector(`.checkBlockTwo`);
  const checkBox = document.querySelector(`.checkBlockTwo input[type='checkbox']`);
  checkBox.checked = true;
  checkBox.disabled = true;
  checkBlock.style.pointerEvents="none";
});

かかかず

.querySelector は、ECMAScript 2015 (ES 6)から使えるようになったバッククォーテーション(`)で囲っています。

おまけのCSS

CSSは、チェックボックスの見た目を整える記述のみです。

/* チェックボックス */
.entry-content input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font-family: 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.entry-content input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.entry-content input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #313131;
  position: absolute;
  left: 0;
  top: 7px;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.entry-content input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: 4px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ちなみに当ブログでは、input タグが標準で「display: none;」になっているのであえて記述していませんが、このチェックボックスのスタイルを当てる場合は、input タグに「display: none;」の記述が必要なので、一緒に記述するようにしましょう。