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

JavaScriptでチェックボックスにチェックを入れる方法|checkedプロパティの使い方

Webフォームを作成していると、「ページを開いた時点で特定のチェックボックスにチェックを入れた状態にしたい」というケースがあります。JavaScriptでは、checkedプロパティを使うことで、これをとても簡単に実現できます。本記事では、具体的なコード例とともにその使い方をわかりやすく解説します。

サンプルで使うチェックボックス

今回は、以下のような2つのチェックボックスを例に説明します。

<label>John</label>
<input id="checkedValue1" type="checkbox">
<label>David</label>
<input id="checkedValue2" type="checkbox">

checkedプロパティでチェック状態を制御する

チェックボックスのオン/オフは、該当要素のcheckedプロパティにブール値(true / false)を代入するだけで切り替えられます。

  • true を代入 → チェックが入る
  • false を代入 → チェックが外れる

コード例

以下は、ページ読み込み時に「David」側のチェックボックス(id: checkedValue2)へ自動的にチェックを入れる完全なサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <label>John</label>
    <input id="checkedValue1" type="checkbox">
    <label>David</label>
    <input id="checkedValue2" type="checkbox">
</body>
<script>
    document.querySelector('#checkedValue2').checked = true
</script>
</html>

プログラムの実行方法

上記のコードを「index.html」などのファイル名で保存してください。VS Codeをお使いの場合は、エディタ上でファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザで即座に結果を確認できます。Live Server拡張機能を使わない場合でも、保存したHTMLファイルをブラウザで直接開けば同じように動作します。

実行結果

ブラウザでページを開くと、JavaScriptの処理によって「David」側のチェックボックスが最初からチェックされた状態で表示されます。

JavaScriptでチェックボックスにチェックを入れる方法|checkedプロパティの使い方


補足:覚えておくと便利なポイント

  • サンプルではjQueryを読み込んでいますが、今回の処理はjQueryなし(バニラJavaScript)でも動作します。不要であれば関連するscriptタグやCSSの読み込みは削除しても問題ありません。
  • チェック状態を取得したい場合は、const isChecked = document.querySelector('#checkedValue2').checked; のようにプロパティを参照するだけでOKです。
  • チェックのオン/オフをユーザー操作のように切り替えたい場合は、element.click() メソッドを利用する方法もあります。
  • なお、よくある間違いとして <lable> というタグ名がありますが、正しくは <label> です。スペルミスがあるとラベルとチェックボックスの紐付けが正しく機能しないため注意しましょう。
  1. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ

  2. JavaScriptでラジオボタングループ内のラジオボタンを選択する方法

    はじめに：ラジオボタンを選択状態にするにはJavaScriptでラジオボタングループ内の特定のラジオボタンを選択状態（チェック済み）にしたい場合は、該当するinput要素のcheckedプロパティをtrueに設定します。まず、次のようなラジオボタングループがあると仮定しましょう。<label>    Gender:    <input type="radio" name="gender" value="Male" />Male&nb