05-03 チェックボックス

1 例題 5-3-1
- 1.1 コード
2 練習問題5-3-1
3 練習問題5-3-2
4 練習問題5-3-3
5 練習問題5-3-4
6 練習問題5-3-5
7 練習問題5-3-6

チェックボックスは複数の項目にチェックを入れるものである。

チェックボックスはは以下のように作成する。trueを指定した項目はチェックが入る。項目がチェックされているかはcheckbox1.checked()で調べることができる。チェックボックスのラベルを取得するメソッドはない。

checkbox1 = createCheckbox('春', false);
checkbox1.position(20, 20);
checkbox2 = createCheckbox('夏', true);
checkbox2.position(20, 40);

例題 5-3-1

春、夏、秋、冬のチェックボックスから選択されている内容を表示する。チェックの判定をコンパクトにするためにcheckboxを配列とする。

コード

const checkbox = [null, null, null, null]; 
let seasons = ['春', '夏', '秋', '冬'];
let result;

function setup() {
  createCanvas(400, 200);

  checkbox[0] = createCheckbox('春', false);
  checkbox[0].position(20, 20);

  checkbox[1] = createCheckbox('夏', false);
  checkbox[1].position(20, 40);

  checkbox[2] = createCheckbox('秋', false);
  checkbox[2].position(20, 60);

  checkbox[3] = createCheckbox('冬', false);
  checkbox[3].position(20, 80);

  let button = createButton('表示');
  button.position(20, 120);
  button.mousePressed(showSelectedSeasons);

  result = createP('');
  result.position(20, 150);
}

function draw() {
  background(220);
}

function showSelectedSeasons() {
  sel = '';
  for (let i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked())
      sel += seasons[i];   
  }
  result.html(sel);
}