やあ子供たち。今日はラジオボタンに関してだけは、jqueryを使わせてもらって、ラジオボタンまわりの作成工数をぐっと縮めさせてもらおうという記事だよ。ラジオボタン（ポチ）は同じグループにしたいやつは同じnameをつけるよ。
はい、以下の3拍子セットを今日はここで一気にまとめてメモしておくぞ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control"content="no-cache"> <title>This is Tab TItle</title> <style> /* スタイルシートコードを記述 */ </style> </head> <!-- スタイルシートコードについては、以下のように別ファイルからも取り込み可能。 その場合は.cssの中に<style></style>は必要ない <link rel="stylesheet" type="text/css" href="my.css" /> --> <body> <!-- HTML部品設置を記述 --> <h1 id="hello">Hello HTML.</h1> <hr> ●radio grp <div class="radio-group"> <input type="radio" name="option" value="option1" id="option1"> <label for="option1">Option 1</label> <input type="radio" name="option" value="option2" id="option2"> <label for="option2">Option 2</label> <input type="radio" name="option" value="option3" id="option3"> <label for="option3">Option 3</label> </div> <button id="getValueButton1" onclick="onGetRadioGrpValue()">getValue</button> <button id="setValueButton1" onclick="onSetRadioGrpValue()">setValue("Option2")</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- <script src="/socket.io/socket.io.js"></script> --> <script type="text/javascript"> // ***javascriptのプログラムを記述*** // var socket = io(); // radio grp // ●ラジオボタングループの値を得る function onGetRadioGrpValue(){ // Get the value of the selected radio button var selectedValue = $("input[name='option']:checked").val(); // Do something with the selected value (e.g., display it in console or on the page) if(selectedValue==null) alert("null"); else alert(selectedValue); } // ●ラジオボタングループとしてのコールバック window.addEventListener("DOMContentLoaded",function(){ $("input[name='option']").change(function() { // Get the value of the selected radio button var selectedValue = $(this).val(); // Do something with the selected value (e.g., display it in console or on the page) alert(selectedValue); }); }); // ●ラジオボタングループに値をセット（値に応じた適切なradioにチェック） function onSetRadioGrpValue(){ // Set the value of the radio button group to "option2" $("input[name='option']").val(["option2"]); } // socket.on("hoge", ()=>{ // }); </script> <!-- プログラムは以下のように別ファイルからも取り込み可能。 <script type="text/javascript" src="./my.js"></script> --> </body> </html>
●参考文献（というかChatGPTプロンプト）
