※ ChatGPTを利用し、要約された質問です(原文:ラジオボタンが未選択時の制御方法について)
ラジオボタンが未選択時の制御方法について
このQ&Aのポイント
Webフォームのラジオボタンが未選択の場合に、ハヌけした書式で出力させない方法について教えてください。
Webフォームのラジオボタン1とラジオボタン3を選択し、ラジオボタン2を選択せずに出力すると、ハヌけした書式で出力されます。ハヌけしないように出力させる方法はありますか?
Webフォームのラジオボタンが未選択の場合、出力結果にハヌけした書式で表示されてしまいます。ハヌけしないように出力させる方法を教えてください。
たびたびお世話になっております。
Webフォームを思考策後しながら作成しています。
下記のラジオボタン1 とラジオボタン3 は選択して、
ラジオボタン2 は選択せずに出力する下記のように、
ハヌけした書式で出力されます。
ハヌけしないように出力させる方法はありますでしょうか?
ご教授をお願いいたします。
出力結果:
-------------------------------------------------------------------------------
【ラジオボタン1】:回答1
【ラジオボタン3】:回答1
ソース:
-------------------------------------------------------------------------------
<head>
<title>アンケートフォーム</title>
<script type="text/javascript">
<!-- 値の加工用// -->
function textoutput() {
<!-- フォームを変数に// -->
var formObj = document.form01;
<!-- radioを取得// -->
var radio01 = formObj.A01;
<!-- radioを取得// -->
var radio02 = formObj.A02;
<!-- radioを取得// -->
var radio03 = formObj.A03;
<!-- textを結合用の変数として準備// -->
<!-- A01の中から選択されているものを取得// -->
var text = '下記リカバリシートを案内' + '\n';
<!-- A02の中から選択されているものを取得// -->
for ( var i = 0; i < radio01.length; i ++ ) {
if ( radio01[i].checked === true ) {
text += '【ラジオボタン1】:' + '\n' + radio01[i].value;}}
text += '\n';
<!-- A02の中から選択されているものを取得// -->
for ( var i = 0; i < radio02.length; i ++ ) {
if ( radio02[i].checked === true ) {
text += '【ラジオボタン2】:' + '\n' + radio02[i].value;}}
text += '\n';
<!-- A02の中から選択されているものを取得// -->
for ( var i = 0; i < radio03.length; i ++ ) {
if ( radio03[i].checked === true ) {
text += '【ラジオボタン3】:' + '\n' + radio03[i].value;}}
text += '\n';
<!-- output.valueにtextを反映(最後に改行コード)// -->
formObj.output.value = text + '\n';
}
</script>
</head>
<body>
<strong>アンケートフォーム</strong><br /><br />
<form name="form01">
<!--ラジオボタン// -->
<strong>・ラジオボタン1</strong><br />
<input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3">
<label for="radio1-1">回答1</label>
<input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4">
<label for="radio1-2">回答2</label>
<input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5">
<label for="radio1-3">回答3</label>
<br />
<!--ラジオボタン// -->
<strong>・ラジオボタン2</strong><br />
<input type="radio" name="A02" value="回答1" id="radio1-1" >
<label for="radio1-1">回答1</label>
<input type="radio" name="A02" value="回答2" id="radio1-2">
<label for="radio1-2">回答2</label>
<input type="radio" name="A02" value="回答3" id="radio1-3">
<label for="radio1-3">回答3</label>
<br />
<!--ラジオボタン// -->
<strong>・ラジオボタン3</strong><br />
<input type="radio" name="A03" value="回答1" id="radio1-1" >
<label for="radio1-1">回答1</label>
<input type="radio" name="A03" value="回答2" id="radio1-2">
<label for="radio1-2">回答2</label>
<input type="radio" name="A03" value="回答3" id="radio1-3">
<label for="radio1-3">回答3 </label>
<br />
<!--ログ出力// -->
ログ出力<br>
<input type="button" value="ログ出力" onClick="textoutput();">
<input type="reset" value="リセット"><br>
<textarea name="output" cols="60" rows="10"></textarea><br>
</form>
</body>
</html>
お礼
まだまだHTMLもJavaScriptも勉強を始めてから2日ですが、 右も左も分からぬまま、なんとか構文等が理解出来るように頑張ってます! <script>と</script>の間の部分をもう少し噛み砕いてご教授頂けますでしょか? 変数とかがやっとボンやりと理解をし始めてるところです。 どうぞ何卒よろしくお願い致します。