html radioの使い方 JavaScript含む #HTML

Radi Button の具体的な使い方を提示します。
group化、送信の具体例などを記載します。
gloop1とgloop2は　<table><tr><td>gloop1</td><td>gloo2</td></tr></table>で省スペースも可能です。
具体的な表示

HTML 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;
    }
</style>
<script src="my_test.js"></script>
</head>
<body>
    <!--test-->
    <form name="form1"><fieldset>
        <legend>Select form1 a maintenance drone:</legend>
        <label><input type="radio" name="test" checked onchange="gloop1(1);">選択肢1A</label>
        <label><input type="radio" name="test" onchange="gloop1(2);"">選択肢1B</label>
    </fieldset></form>
    <form name="form2"><fieldset>
        <legend>Select form2 a maintenance drone:</legend>
        <label><input type="radio" name="test" checked onchange="gloop2(1);">選択肢2A</label>
        <label><input type="radio" name="test" onchange="gloop2(2);">選択肢2B</label>
        <label><input type="radio" name="test" onchange="gloop2(3);">選択肢2C</label>
    </fieldset></form>
    <form name="all_master"><fieldset>
        <legend>select receive</legend>
        <input type="button" value="test" onclick="ok_gloop();"><br>
    </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 = 1;
let global_gloop2 = 1;
function gloop1(nomber){
    global_gloop1 = nomber;
    alert(global_gloop1);
}
function gloop2(nomber){
    global_gloop2 = nomber;
    alert(global_gloop2);
}
function ok_gloop(){ // button
    alert("gloop1: " + global_gloop1 + " gloop2: " + global_gloop2);
}

答え

もちろん、onchange="gloop1('選択肢1A');"
として、受け側も文字列にすれば、簡単に出来ます。

と言う事で、まとめてみました。