momojaja
@momojaja

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

ページを読み込んだ際に複数のラジオボタンにチェックを入れたいです。

解決したいこと

java初心者です。
ページを読み込んだ際に、デフォルトで指定した複数のラジオボタンにチェックを入れておきたいのですが、
可能でしょうか。

希望の動作としては、「プランA」と「プランB」にデフォルトでチェックが入り、
「プランB」か「プランC」のどちらかを選択できるようにしたいです。

自動計算の仕組みを使用しているため、「checked」ではなく、javaのほうでその挙動になればありがたいのですが。

どなたかお知恵をいただけないでしょうか。

よろしくお願いいたします。

発生している問題・エラー

出ているエラーメッセージを入力

例)

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<form name="myform">
<div class="box">
  <label>
    <input type="radio" id="base_plan_01" name="基本プラン" value="45000" onClick="calc_total()" >
   プランA<br class="sp">
    <span class="price">¥45,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
</div>
<div class="box">
  <label>
    <input type="radio" id="base_plan_02" name="基本プラン_2" value="40000" onClick="calc_total()" >
    プランB<br class="sp">
    <span class="price">¥40,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
</div>
<div class="box">
  <label>
    <input type="radio" id="base_plan_03" name="基本プラン_2" value="100000" onClick="calc_total()" >
    プランC<br class="sp">
    <span class="price">¥100,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
</div>

<dl>
  <dt>お見積り合計金額(基本料金含む)</dt>
  <dd>
    <input type="text" name="goukei" class="total_price">
    <p class="total_caution">次月以降の金額はお打ち合わせ時にお伝えし、<br class="sp">契約条件確認書に記載されます。</p>
  </dd>

</dl>	
</form>

<!--合計金額計算-->
<script>
<!--
function calc_total(){
  kingaku = 0;
  for (i=0; i<document.myform.length-1; i++){
    if (document.myform.elements[i].checked){
      kingaku += eval(document.myform.elements[i].value);
    }
  }
  document.myform.goukei.value = kingaku + " 円";
}
//-->
</script>
<!--ぺージを読み込んだ際にラジオボックスにチェックが入る仕様-->
<script type="text/javascript">
	window.onload = function () {
    document.getElementById( "base_plan_01" ).click();
	}
</script>


例)

def greet
  puts Hello World
end

自分で試したこと

該当箇所のスクリプトを単純に2個並べてみましたが、うまくゆきませんでした。

0

2Answer

自動計算の仕組みを使用しているため、「checked」ではなく、javaのほうでその挙動になればありがたいのですが。

JavaScript ではなくて Java なのですか?

希望の動作としては、「プランA」と「プランB」にデフォルトでチェックが入り、「プランB」か「プランC」のどちらかを選択できるようにしたいです。

JavaScript でよければ、質問のコードに以下のように一行追加すれば望むようになると思います。

window.onload = function () {
    document.getElementById( "base_plan_01" ).click();
    document.getElementById("base_plan_02").click();  // これを追加
}

結果:

init.jpg

これでは望む結果にならない場合、どこがどう望みとは違うかを書いてください。

1Like

Comments

  1. @momojaja

    Questioner

    @SurferOnWww
    大変失礼いたしました。
    javaではなくjavascriptでした。
    ご指摘の通りに修正した結果、望む挙動になりました。
    とても助かりました。
    誠にありがとうございます!

  2. 解決したのであればこのスレッドはクローズしてください。

"グループ内でラジオボタンは一つしか同時に選択することができません。"
参考リンク先ではこのように説明されており、ラジオボタンは複数の選択肢の中から1つを選択するものです。
複数選択を可能とする場合はチェックボックスや、multipleを有効にしたセレクトボックスを使用します。

希望の動作としては、「プランA」と「プランB」にデフォルトでチェックが入り、
「プランB」か「プランC」のどちらかを選択できるようにしたいです。

この説明だと「プランA」は必須に見えるので、選択肢にする必要は無いように思えます。
具体的に選択可能なパターンを明示していただければ、より適切な選択が考えられるかもしれません。

javaのほうでその挙動になればありがたいのですが。

細かいと思われるかもしれませんが、JavaとJavaScriptは異なるものです。
JavaでもこうしたHTMLを扱うことはあるので、誤解を防ぐためにも正確な用語を使うことをお勧めします。

参考

0Like

Comments

  1. "グループ内でラジオボタンは一つしか同時に選択することができません。" 参考リンク先ではこのように説明されており、ラジオボタンは複数の選択肢の中から1つを選択するものです。

    「参考リンク先」に "ラジオグループは、グループ内のそれぞれのラジオボタンに同じ name を設定することで定義します" と書いてあり、質問者さんのコードでは「プランA」と「プランB」「プランC」ではグループが違います。

  2. @momojaja

    Questioner

    @blue32a
    ご指摘ありがとうございます。
    JavaとJavaScriptは異なるものということを改めて認識させていただきました。

  3. @SurferOnWww
    ご指摘ありがとうございます。
    プランのグルーピングについて誤解しておりました。

Your answer might help someone💌