.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptのチェックボックスの設定方法は？コード例も紹介

JavaScriptのチェックボックスの設定方法は？コード例も紹介

  • Javascript
  • プログラミング言語
公開日時: 　 更新日時:
JavaScriptのチェックボックスの設定方法は？コード例も紹介
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    JavaScriptのチェックボックスの設定方法は、どのようなものがあるのでしょか？

    プロジェクト
    マネージャー
    チェックボックス設定の基本をしっかりご紹介していきましょう。

    全体のコード


    この記事ではJavaScriptでのチェックボックスの設定方法、操作方法について学んでいきます。

    まず全体のコードを示します。

    <!DOCTYPE html>
    <html lang=”ja”>
    <head>
    <meta charset=”utf-8″>
    <title>チェックボックスサンプル</title>
    </head>
    <body>
    <p>操作したチェックボックスの値：<span id=”span”></span>/p>
    <form name=”f”>
    <input type=”checkbox” name=”c” id=”c0″ value=”あいうえお” onchange=”chk(this.value)”>チェックボックス1
    <input type=”checkbox” name=”c” id=”c1″ value=”かきくけこ” onchange=”chk(this.value)”>チェックボックス2
    <input type=”button” value=”1つ目のチェックボックスの値を確認” onclick=”confirm0()”/>
    <input type=”button” value=”2つ目のチェックボックスの値を確認” onclick=”confirm1()”/>
    <input type=”button” value=”チェックを入れる” onclick=”slct()”/>
    <input type=”button” value=”チェックを外す” onclick=”unslct()”/>
    </form>
    <script>
    function confirm0() {
    const c = document.getElementById(“c0”);
    alert(c.value);
    }
    function confirm1() {
    const c = document.getElementById(“c1”);
    alert(c.value);
    }
    function slct() {
    const c = document.f.c;
    for (let i = 0; i < c.length; i++) { c[i].checked = true; } } function unslct() { const c = document.f.c; for (let i = 0; i < c.length; i++) { c[i].checked = false; } } function chk(val) { document.getElementById("span").textContent = val; } </script> </body> </html> それでは解説していきます。

    チェックボックスの設定方法

    <input type=”checkbox” name=”c” id=”c0″ value=”あいうえお” onchange=”chk(this.value)”>チェックボックス1
    <input type=”checkbox” name=”c” id=”c1″ value=”かきくけこ” onchange=”chk(this.value)”>チェックボックス2

    この部分が、HTMLでのチェックボックスの記述方法です。

    typeをcheckboxとし、valueに値を入れます。タグを閉じた後に、チェックボックスに表記するテキストを書きます。
    onchangeはJavaScriptでのイベント処理に関わるところです。後から解説します。

    チェックボックスの値の取得方法

    function confirm0() {
    const c = document.getElementById(“c0”);
    alert(c.value);
    }
    function confirm1() {
    const c = document.getElementById(“c1”);
    alert(c.value);
    }

    チェックボックスの要素のDOMをJavaScriptのgetElementById関数で取得し、valueを確認してチェックボックスの値を確認するサンプルです。
    この場合、
    チェックボックス1はあいうえお
    チェックボックス2はかきくけこ
    です。
    button要素のonclickイベントでこのJavaScriptの関数をイベントハンドラとして呼んでいます。button要素のonclickにこの関数を書いておくと、JavaScriptのイベント処理というのが働いて、ボタンがクリックされたときにこの関数が呼ばれる仕組みになっています。

    チェックボックスの操作方法

    function slct() {
    const c = document.f.c;
    for (let i = 0; i < c.length; i++) { c[i].checked = true; } } function unslct() { const c = document.f.c; for (let i = 0; i < c.length; i++) { c[i].checked = false; } } 同じくcheckedプロパティが、チェックボックスがチェックされているか否かのプロパティです。 checkedプロパティの値を変えることで、チェックボックスをチェックしたりチェックを外したりすることができます。 button要素のonclickイベントでこのJavaScriptの関数をイベントハンドラとして呼んでいます。先ほどの関数と同じ仕組みです。 ここで、 document.f.c という書き方が不思議かもしれません。 これはドキュメントツリーをたどる書き方で、 documentはHTMLドキュメント全体 fはform要素のnameのf cはその子要素のcheckbox要素のnameのc という書き方です。 覚えておくと便利な書き方なので、覚えておいてください。

    onchangeイベント

    <input type=”checkbox” name=”c” id=”c0″ value=”あいうえお” onchange=”chk(this.value)”>チェックボックス1
    <input type=”checkbox” name=”c” id=”c1″ value=”かきくけこ” onchange=”chk(this.value)”>チェックボックス2

    function chk(val) {
    document.getElementById(“span”).textContent = val;
    }

    JavaScriptのonchangeイベントは、ユーザーがチェックボックスをチェックしたりチェックを外したりするたびに発生するJavaScriptのイベントです。
    this.value
    で「このチェックボックスのvalue」をイベントハンドラに渡しています。
    イベントハンドラのchkの方では、HTML内に渡された値を書き込んでいます。

    システム
    エンジニア
    JavaScriptでチェックボックスを設定するのは簡単にできそうですね。

    プロジェクト
    マネージャー
    そうですね。HTMLとの書き方の関連さえ気を付ければ、素直な記述で操作できるので実践してみましょう！

    JavaScriptでチェックボックスを設定してみよう

    JavaScriptでチェックボックスを記述し、その値を取得したり、状態を変えたり、チェックされたか否かを監視するサンプルプログラム紹介しました。HTMLとの書き方の関連さえ気を付ければ、素直な記述で操作できます。

    フォームには他にもラジオボタンなどがありますが、基本は一緒です。

    JavaScriptでチェックボックスを扱うことはこのように簡単にできますので、開発に取り入れていきましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ

    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへ応募する
    会員登録不要! カンタン45秒!

    新着案件New Job

    関連記事Related Posts