上の項目の、改造版で遊んでみた。
動的にアンケートを行えないか試してみた。
html my_test0.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="たっちゃん,studio。">
<title>my_test0</title>
<style>
body {
background-color: #f0f0f0;
color: #000;
font-size: 16px;
margin: 10px;
}
fieldset {
width: 300px;
padding: 10px;
margin: 10px;
}
legend {
padding: 5px;
background-color: #f0f0f0;
}
label {
display: block;
margin: 5px;
}
#receive {
width: 600px;
padding: 10px;
margin: 10px;
color: #008;
background-color: #0ff;
border-color: #f00;
border-style: solid;
border-width: 2px;
}
</style>
<script src="my_test.js"></script>
</head>
<body>
<br><br><br><br><br><br>
<!--test-->
<table><tr><td Valign="top">
<fieldset>
<legend>Select name1 a maintenance drone:</legend>
<table><tr>
<td><label><input type="radio" name="test1" onchange="gloop1('選択肢1A');">選択肢1A</label></td>
<td><label><input type="radio" name="test1" onchange="gloop1('選択肢1B');">選択肢1B</label></td>
</tr></table>
<div id="test_my1">選択</div>
<!--<input type="checkbox" name="check1" onchange="select_g1_1(checked);">選択1
<input type="checkbox" name="check2" onchange="select_g1_2(checked);">選択2
<input type="checkbox" name="check3" onchange="select_g1_3(checked);">選択3-->
<div id="test_my1_1"></div>
</fieldset>
</td><td>
<fieldset>
<legend>Select name2 a maintenance drone:</legend>
<label><input type="radio" name="test2" checked onchange="gloop2(1);">選択肢2A</label>
<label><input type="radio" name="test2" onchange="gloop2(2);">選択肢2B</label>
<label><input type="radio" name="test2" onchange="gloop2(3);">選択肢2C</label>
</fieldset>
</td></tr></table>
<hr>
<form name="all_master"><fieldset id="receive">
<legend>select receive</legend>
<input type="button" value="test" onclick="ok_gloop();"><br>
<div id="receive1"></div>
</fieldset></form>
<!--test end-->
</body>
</html>
javascript my_test.js
// test 2024/05/25
// Path: my_test.js
/* mt note: this is a test */
let global_gloop1 = "gloop1_none";
let global_gloop2 = 1;
var g_1_1_check = false;
var g_1_2_check = false;
var g_1_3_check = false;
var g_1_b_1_check = false;
var g_1_b_2_check = false;
var g_1_b_3_check = false;
function gloop1(nomber){
global_gloop1 = nomber;
alert(global_gloop1);
if(global_gloop1 == "選択肢1A"){
document.getElementById("test_my1").innerHTML = '<input type="checkbox" name="check1" onchange="select_g1_1(checked);">選択1 <input type="checkbox" name="check2" onchange="select_g1_2(checked);">選択2 <input type="checkbox" name="check3" onchange="select_g1_3(checked);">選択3';
if(g_1_1_check == false && g_1_2_check == false && g_1_3_check == false){
document.getElementById("receive1").innerHTML = global_gloop1+" なにも選択されていません";
}
}
if(global_gloop1 == "選択肢1B"){
document.getElementById("test_my1").innerHTML = '<input type="checkbox" name="check1" onchange="select_g1_1(checked);">選択1 <input type="checkbox" name="check2" onchange="select_g1_2(checked);">選択2 選択3はありません。';
if(g_1_b_1_check == false && g_1_b_2_check == false && g_1_b_3_check == false){
document.getElementById("receive1").innerHTML = global_gloop1+" なにも選択されていません";
}
}
}
function select_g1_1(choice){
if(choice == true){
if(global_gloop1 == "選択肢1A"){
g_1_1_check = true;
document.getElementById("test_my1_1").innerHTML = "選択1A_1が選択されました";
}
if(global_gloop1 == "選択肢1B"){
g_1_b_1_check = true;
document.getElementById("test_my1_1").innerHTML = "選択1B_1が選択されました";
}
}else{
if(global_gloop1 == "選択肢1A"){
g_1_1_check = false;
document.getElementById("test_my1_1").innerHTML = "選択1A_1が解除されました";
}
if(global_gloop1 == "選択肢1B"){
g_1_b_1_check = false;
document.getElementById("test_my1_1").innerHTML = "選択1B_1が解除されました";
}
}
if(global_gloop1 == "選択肢1A"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1A_1:"+g_1_1_check+" 1A_2:"+g_1_2_check+" 1A_3:"+g_1_3_check;
}
if(global_gloop1 == "選択肢1B"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1B_1:"+g_1_b_1_check+" 1B_2:"+g_1_b_2_check+" 1B_3:"+g_1_b_3_check;
}
}
function select_g1_2(choice){
if(choice == true){
if(global_gloop1 == "選択肢1A"){
g_1_2_check = true;
document.getElementById("test_my1_1").innerHTML = "選択1A_2が選択されました";
}
if(global_gloop1 == "選択肢1B"){
g_1_b_2_check = true;
document.getElementById("test_my1_1").innerHTML = "選択1B_2が選択されました";
}
}else{
if(global_gloop1 == "選択肢1A"){
g_1_2_check = false;
document.getElementById("test_my1_1").innerHTML = "選択1A_2が解除されました";
}
if(global_gloop1 == "選択肢1B"){
g_1_b_2_check = false;
document.getElementById("test_my1_1").innerHTML = "選択1B_2が解除されました";
}
}
if(global_gloop1 == "選択肢1A"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1A_1:"+g_1_1_check+" 1A_2:"+g_1_2_check+" 1A_3:"+g_1_3_check;
}
if(global_gloop1 == "選択肢1B"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1B_1:"+g_1_b_1_check+" 1B_2:"+g_1_b_2_check+" 1B_3:"+g_1_b_3_check;
}
}
function select_g1_3(choice){
if(choice == true){
if(global_gloop1 == "選択肢1A"){
g_1_3_check = true;
document.getElementById("test_my1_1").innerHTML = "選択1A_3が選択されました";
}
if(global_gloop1 == "選択肢1B"){
document.getElementById("test_my1_1").innerHTML = "ありえません";
}
}else{
if(global_gloop1 == "選択肢1A"){
g_1_3_check = false;
document.getElementById("test_my1_1").innerHTML = "選択1A_3が解除されました";
}
}
if(global_gloop1 == "選択肢1A"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1A_1:"+g_1_1_check+" 1A_2:"+g_1_2_check+" 1A_3:"+g_1_3_check;
}
if(global_gloop1 == "選択肢1B"){
document.getElementById("receive1").innerHTML = global_gloop1+"選択され 1B_1:"+g_1_b_1_check+" 1B_2:"+g_1_b_2_check+" 1B_3:"+g_1_b_3_check;
}
}
function gloop2(nomber){
global_gloop2 = nomber;
alert(global_gloop2);
}
function ok_gloop(){ // button
if(global_gloop1 == "gloop1_none"){
document.getElementById("receive1").innerHTML = "選択の必須項目のname1が選択されていません";
}
alert("gloop1: " + global_gloop1 + " gloop2: " + global_gloop2+"\n"+" g_1_1_check: "+g_1_1_check+" g_1_2_check: "+g_1_2_check+" g_1_3_check: "+g_1_3_check+"\n"+" g_1_b_1_check: "+g_1_b_1_check+" g_1_b_2_check: "+g_1_b_2_check+" g_1_b_3_check: "+g_1_b_3_check);
}
よろしく。