LANG SELRCT

コードを書く場所についてはこちら

2017年12月30日土曜日

選択されているチェックボックスの値を取得する

HTML Serviceでこういう機能を作る







チェックボックスを選択してから「ボタン」をクリックすると
選択されているチェックボックスのvalueがアラートに出る



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <form id="form1">
    <input type="checkbox" name="check1" id="check1_1" value="選択肢1" checked="checked">
    <label for="check1_1">選択肢1</label>
    <br>
    <input type="checkbox" name="check1" id="check1_2" value="選択肢2">
    <label for="check1_2">選択肢2</label>
    <br>
    <input type="checkbox" name="check1" id="check1_3" value="選択肢3">
    <label for="check1_3">選択肢3</label>
  </form>
  <br>
  <button type="button" id="bt">ボタン</button>
  <script>
    document.getElementById("bt").onclick = get_check1;

    function get_check1() {
      var form = document.getElementById("form1");
      var check1 = form.check1;
      var array = [];
      for (var i = 0; i < check1.length; i++) {
        if (check1[i].checked) {
          array.push(check1[i].value);
        }
      }
      alert(array);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


フォームを置く
1つめのチェックボックス
そのラベル

2つめのチェックボックス
そのラベル

3つめのチェックボックス
そのラベル


ボタンを置く

ボタンがクリックされたらget_check1を実行する

この機能がやること
対象のフォームを取得して
対象のグループ(name)を取得して
結果を入れる配列を用意して
チェックボックスの状態をひとつずつ取得する
もしチェックされていたら
arrayに追加する


結果をアラートに出す