Jqueryでラジオボタンの真偽値を一つずつ調べる処理方法について

Question

railsのradio_button_tagで設置したラジオボタンが選択されていなかったらアラートが出るようにしたいのですがjavascriptとJqueryを始めたばかりのため調べても解決できなかったためご教授をお願いしたいと思っております。

送信ボタンがclickされたとき未選択のラジオボタンがあったらアラートを出したい

<%= form_with url: "/home/result", controller: "home", action: "result", local: true, id: "radio_buttom" do %>
    <section > <strong>Q1 質問１</strong>
      <p>  
        <%= radio_button_tag("radio1" , "1" )%>           
        <%= label_tag("radio1_1","とても当てはまる")%>
        <%= radio_button_tag("radio1" , "2" ,)%>
        <%= label_tag("radio2_2","当てはまる")%>
        <%= radio_button_tag("radio1" , "3",)%>
        <%= label_tag("radio1_3","当てはまらない")%>
        <%= radio_button_tag("radio1" , "4",)%>
        <%= label_tag("radio1_4","全く当てはまらない")%>
     </p>
    <section>
    <section > <strong>Q1 質問2</strong>
      <p>  
        <%= radio_button_tag("radio2" , "1" )%>           
        <%= label_tag("radio2_1","とても当てはまる")%>
        <%= radio_button_tag("radio2" , "2" ,)%>
        <%= label_tag("radio2_2","当てはまる")%>
        <%= radio_button_tag("radio2" , "3",)%>
        <%= label_tag("radio2_3","当てはまらない")%>
        <%= radio_button_tag("radio2" , "4",)%>
        <%= label_tag("radio2_4","全く当てはまらない")%>
     </p>
    <section> 
   //あとラジオボタンフォームが10回分ありますが省略させていただきます。
　　<%=submit_tag "送信" %>
<%=end%>

$('#submit').click(function(){
    if  (真偽地の判定の処理){
       
    }else{
    alert('未選択の質問があります。');
    }
  });

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

これかな。
https://ja.stackoverflow.com/questions/39385/%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E7%84%A1%E6%8C%87%E5%AE%9A%E3%81%AE%E7%8A%B6%E6%B3%81%E3%82%92%E6%8D%89%E3%81%88%E3%82%88%E3%81%86%E3%81%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8C-%E7%94%BB%E9%9D%A2%E3%81%A8%E7%95%B0%E3%81%AA%E3%82%8A%E6%97%A2%E3%81%AB%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B

Answer 1

もし古いブラウザをサポートしなくてよいなら、各グループのラジオボタンの1つにrequired属性を付けるだけで、JavaScriptコードはまったく必要ありません。

        <%= radio_button_tag("radio1" , "1", required:'' )%>

古いブラウザをサポートする必要があるなら、現在のコードを以下のように直しましょう。

$('#submit').click(function() {
  const groups = ['radio1', 'radio2', ...以下続く];
  const allGroupsChecked = groups.map(g => !!this.form[g].value).reduce(
      (acc, value) => acc && value); 
  if (!allGroupsChecked){
    alert('未選択の質問があります。');
    return false;
  }
});

Comments

[RTn]

この度はご回答ありがとうございます。
後でメソッドの意味を調べてみようと思います。
とりあえず実装してみたのですが、うまく作動せずに選択されていないボタンがあるとエラーページが出てしまいました。
if文の部分を削除し、アラートだけ出そうとしたのですが出ませんでした、
jqueryで文字色は変更できたので作動自体はするのですが、何が原因かわかりますでしょうか？

[FKM]

Chromeを開いてF１２で開発を開き、consoleで確認してみてください。エラーを吐いている可能性があり、アラートメッセージを出すまでの間に処理が止まっている可能性もあります。