やってみたシリーズradioとcheckboxで遊んでみた。

https://qiita.com/tattyan3/items/906d863584c85a8d0e26

上の項目の、改造版で遊んでみた。
動的にアンケートを行えないか試してみた。

```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);
}
```
参考
![スクリーンショット 2024-05-25 133038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3625232/c66fafb1-6ac3-1468-931a-04605cffe253.png)

よろしく。