このようなラジオボタンを作る例です
- ラベルをクリックしても選択できる
- ラジオボタンがクリックされたらvalueをアラートに出す
コード.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile('index');
}
|
意訳この処理は以下を実行する 指定したファイルのHTMLを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<div id="main_div">
</div>
</body>
<script>
var values = ["aaa", "bbb"];
create_radio(values);
function create_radio(values) {
var main_div = document.getElementById('main_div');
for (var i = 0; i < values.length; i++) {
var radio = document.createElement('input');
var label = document.createElement('label');
var br = document.createElement('br');
var id = "main_div_radio" + i;
var name = "group1";
var value = values[i];
radio.setAttribute("type", "radio");
radio.setAttribute("value", value);
radio.setAttribute("id", id);
radio.setAttribute("name", name);
label.setAttribute("for", id);
label.innerHTML = value;
if(value == "aaa"){
radio.checked = true;
}
radio.onclick = function() {
alert(this.value);
}
main_div.appendChild(br);
main_div.appendChild(radio);
main_div.appendChild(label);
}
}
</script>
</html>
|
意訳これはHTML5文書です divを置く（idはmain_div） ラベルの値を用意する create_radio(values)を実行する この機能がやること idがmain_divの要素を取得して valuesの数だけ以下を繰り返す input要素を作成して label要素を作成して 改行の要素を作成して idを決めて nameを決めて（ラジオボタンをひとつだけ選択できるようにする） valueをvaluesから取得して input要素のtypeをradioにして valueを設定して idを設定して nameを設定して labelを付ける要素を指定して innerHTMLにvalueを入れる もしvalueがaaaなら ラジオボタンを選択しておく ラジオボタンがクリックされたら以下を実行する クリックされたラジオボタンのvalueをアラートに出す main_divに改行を追加する main_divにラジオボタンを追加する main_divにラベルを追加する |
関連記事
ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形
テキストエリアを作りたい場合
HTML要素を動的に作りたい（テキストエリア）
ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形
テキストエリアを作りたい場合
HTML要素を動的に作りたい（テキストエリア）
