【初心者向け】javascript練習問題(チェックボックス編)

※本サイトはアフィリエイトリンクを掲載しています。
javascript
2023.07.30

問題1 : 複数選択チェックボックス

以下の画面イメージのように複数選択のチェックボックスを作成し、現在選択中の値をコンソールログに表示してください。クリック何回目のログなのかを、わかりやすくしてください。

学習ポイント①：複数選択チェックボックスの作り方
学習ポイント②：クリック関数の使い方
学習ポイント③：値取得の仕方
学習ポイント④：値表示の仕方
学習ポイント⑤：クリックカウントの仕方

 

解答例　(今回はコンソール表示には配列を使っていません。→問題2でやります。)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>checkbox</title>
  </head>
  <body>
    <p>桃太郎が鬼ヶ島に連れていく動物は何ですか？</p>
    <input type="checkbox" id="dog" value="犬" onclick="animalCheck()" /><label for="dog">犬</label>
    <input type="checkbox" id="cat" value="猫" onclick="animalCheck()" /><label for="cat">猫</label>
    <input type="checkbox" id="bird" value="キジ" onclick="animalCheck()" /><label for="bird">キジ</label>
    <input type="checkbox" id="monkey" value="猿" onclick="animalCheck()" /><label for="monkey">猿</label>
    <input type="checkbox" id="gorira" value="ゴリラ" onclick="animalCheck()" /><label for="gorira">ゴリラ</label>
  </body>
</html>
<script>
  let dog = document.getElementById('dog');
  let cat = document.getElementById('cat');
  let bird = document.getElementById('bird');
  let monkey = document.getElementById('monkey');
  let gorira = document.getElementById('gorira');
　let animals = [dog, cat, bird, monkey, gorira];
  let count = 0;

  function animalCheck () {
    count++;
    for (i=0; i<animals.length; i++) {
      if (animals[i].checked) {
        console.log('クリック'+count+'回目：'+animals[i].value)
      }
    }
  }
</script>

 

処理の流れ解説

HTML
①チェックボックスを作成する
②チェックボックスにクリック関数をセットする(onclickを使用)
javascript
③変数定義をする
④クリック関数を作成する
⑤クリックしたごとにcountをプラスしてクリック回数を数える
⑥値.checkedを使用してチェックされているか否かを判定する(checkedはtrueかfalseが返る)
⑦コンソールに表示する

 

問題2 : 問題1の値表示を画面上に表示

問題1では選択した値をコンソールログに表示しましたが、下記画面イメージの「チェック済み動物」のように画面表示してください。

学習ポイント①：配列の要素の追加

 

解答例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>checkbox</title>
  </head>
  <body>
    <p>桃太郎が鬼ヶ島に連れていく動物は何ですか？</p>
    <input type="checkbox" id="dog" value="犬" onclick="animalCheck()" /><label for="dog">犬</label>
    <input type="checkbox" id="cat" value="猫" onclick="animalCheck()" /><label for="cat">猫</label>
    <input type="checkbox" id="bird" value="キジ" onclick="animalCheck()" /><label for="bird">キジ</label>
    <input type="checkbox" id="monkey" value="猿" onclick="animalCheck()" /><label for="monkey">猿</label>
    <input type="checkbox" id="gorira" value="ゴリラ" onclick="animalCheck()" /><label for="gorira">ゴリラ</label>
    <p>チェック済み動物：<span id="answer"></span></p>
  </body>
</html>
<script>
  let dog = document.getElementById('dog');
  let cat = document.getElementById('cat');
  let bird = document.getElementById('bird');
  let monkey = document.getElementById('monkey');
  let gorira = document.getElementById('gorira');
  let answer = document.getElementById('answer');
　let animals = [dog, cat, bird, monkey, gorira];
  function animalCheck () {
    let checkAnimals = [];
    for (i=0; i<animals.length; i++) {
      if (animals[i].checked) {
        checkAnimals.push(animals[i].value);
      }
    }
    answer.innerHTML = checkAnimals;
  }
</script>
配列を使って画面表示させています。
配列に要素を追加するのにpushメソッドを使用しています。

 

問題3 : 単一チェックボックス

単一選択のチェックボックスを作成してください。

学習ポイント①：単一チェックボックスの作り方の参考例が学べる

 

解答例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>checkbox</title>
</head>
<body>
  <p>桃太郎が鬼ヶ島に連れていく動物を1つ選択してください。</p>
  <input type="checkbox" id="dog" value="犬" onclick="animalCheck('犬')" /><label for="dog">犬</label>
  <input type="checkbox" id="cat" value="猫" onclick="animalCheck('猫')" /><label for="cat">猫</label>
  <input type="checkbox" id="bird" value="キジ" onclick="animalCheck('キジ')" /><label for="bird">キジ</label>
  <input type="checkbox" id="monkey" value="猿" onclick="animalCheck('猿')" /><label for="monkey">猿</label>
  <input type="checkbox" id="gorira" value="ゴリラ" onclick="animalCheck('ゴリラ')" /><label for="gorira">ゴリラ</label>
</body>
</html>
<script>
  let dog = document.getElementById('dog');
  let cat = document.getElementById('cat');
  let bird = document.getElementById('bird');
  let monkey = document.getElementById('monkey');
  let gorira = document.getElementById('gorira');
  let answer = document.getElementById('answer');
　let animals = [dog, cat, bird, monkey, gorira];
  function animalCheck (animal) {
    for (i=0; i<animals.length; i++) {
      if (animals[i].value === animal) {
        animals[i].checked = true;
      } else {
        animals[i].checked = false;
      }
    }
  }
</script>

 

見て頂いた通り、単純に現在クリックしたチェックボックスが何かを判定してチェックをtrueにし、それ以外はfalseにして選択を解除している形です。

他にもやり方があるかもしれませんが。

そもそも前提として・・・単一チェックボックスを作成するケースは稀です。

通常は単一で良いのであれば、ラジオボタンやセレクトボックスを使用します。

しかし、クライアント都合や状況次第では単一チェックボックスを作成することもあります。

 

単一の場合は、ラジオボタンやセレクトボックスが一般的です。
稀に単一チェックボックスを作成することもあり得るので参考にしてください。

 

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント