Velo 第０７回 マルチチェックボックスのコーディング
多肢選択ボックスは入力を素早くできる優れたツールです。
エディターではパーツを追加/入力欄/チェックボックス から選択できます。
Velo Reference では Checkbox Group として説明が加えられています。
このエレメントには３つのプロパティ options， value， selectedIndices があります。
options は マルチチェックボックスのラベルと値のペアをオブジェクト化したものの配列で、読み書きができます。
value はチェックマークで選択されたラベルと値のペアをオブジェクト化したものの配列で、読み書きができます。
selectedIndices はチェックマークで選択されたボックスのインデックスの配列で、読み書きができます。
マルチチェックボックス (myCheckboxGroup) について以下のコードをご覧下さい。
// options プロパティを取得して変数 opt に配列を代入します
let opt = $w("#myCheckboxGroup").options;
// 配列の１番目に登録されたボックスのラベルと値を取り出します
let firstLabel = opt[0].label;
let firstValue = opt[0].value;
// 今度は options に配列を代入してプロパティを設定します
$w("#myCheckboxGroup").options = [
{"label": "Taro", "value": "first"},
{"label": "Jiro", "value": "second"}
];
// value プロパティを取得して変数 val に配列を代入します
let val = $w("#myCheckboxGroup").value;
// 今度は value に配列を代入してプロパティを設定します
$w("#myCheckboxGroup").value = ["value1", "value3"];
// selectedIndices プロパティを取得して変数 ind に配列を代入します
let ind = $w("#myCheckboxGroup").selectedIndices;
// 今度は selectedIndices に配列を代入してプロパティを設定します
$w("#myCheckboxGroup").selectedIndices = [0,2];いずれのプロパティも配列というデータ型ですので for/of 、スプレッド演算子、また多くの配列メソッドを使うことができますので、コーディングは非常に能率的です。
Velo開発のご依頼はこちら