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');"
として、受け側も文字列にすれば、簡単に出来ます。
と言う事で、まとめてみました。