こういうチェックボックスをJavaScriptで作りたい
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳
この機能がやること
指定したHTMLファイルを表示する
|
index.html
<!DOCTYPE html>
<html>
<body>
<form id="checkbox_form"></form>
<script>
var values = ["aaa", "bbb", "ccc"];
create_checkbox(values);
function create_checkbox(values) {
var parent = document.getElementById("checkbox_form");
for (var i = 0; i < values.length; i++) {
var checkbox = document.createElement('input');
var label = document.createElement('label');
var br = document.createElement('br');
var id = "check" + i;
var name = "check1";
var value = values[i];
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("id", id);
checkbox.setAttribute("name", name);
checkbox.setAttribute("value", value);
label.setAttribute("for", id);
label.textContent = value;
checkbox.onclick = function() {
alert(this.value);
}
parent.appendChild(br);
parent.appendChild(checkbox);
parent.appendChild(label);
}
}
</script>
</body>
</html>
|
意訳
フォームを用意する
チェックボックスの選択肢
create_checkboxでチェックボックスを作る
この機能がやること(valuesを受け取る)
親要素を取得して
valuesの数だけ以下を繰り返す
チェックボックスを作って
ラベルを作って
改行を作って
チェックボックスのidを決めて
チェックボックスのnameを決めて（チェックボックスのグループ名）
チェックボックスのvalueを決めて
チェックボックスのtypeを設定して
チェックボックスのidを設定して
チェックボックスのnameを設定して
チェックボックスのvalueを設定して
ラベルのforにチェックボックスのidを設定して
ラベルのtextContentにvalueを設定して表示する
チェックボックスがクリックされた時に
そのvalueをアラートに出す
親要素に改行を追加して
親要素にチェックボックスを追加して
親要素にラベルを追加する
|
