LoginSignup
0
0
@tattyan3(tatsuji shimo)

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

Posted at

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

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

よろしく。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0