Оповещать, если какая-либо из группы переключателей снята

Question

Это часть моего кода формы оценки. У меня 10 групп радиокнопок. Я не могу написать фрагмент кода, где будет отображаться alert, если пользователь не выберет ни одну из групп кнопок radio. alert отображается, когда пользователь нажимает кнопку отправки.

body {
  background-color: White;
}

.hoverTable {
  width: 100%;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #4e95f4 1px solid;
}


/* Define the default color for all the table rows */

.hoverTable tr {
  background: ##ffffff;
}


/* Define the hover highlight color for the table row */

.hoverTable tr:hover {
  background-color: #f9d71c;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: center;
}

<h1 align="center">You are now evaluating AE-SE grade</h1>
<table class="hoverTable" bgcolor="white">
  <colgroup>
    <col style="background-color:#a9a9a9">
  </colgroup>
  <tr bgcolor="#a9a9a9">
    <th>Competencies</th>
    <th>Elements</th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <p id="choices">
      <td rowspan="1"><b>Relationship and networking</b></td>
      <td><i>Building relations and network</i></td>
      <td><input type="radio" name="a" value="1" />Refrains from interacting with other members in the team</td>
      <td><input type="radio" name="a" value="2" /></td>
      <td><input type="radio" name="a" value="3" />Interacts with the team members</td>
      <td><input type="radio" name="a" value="4" /></td>
      <td><input type="radio" name="a" value="5" />Makes efforts to engage in conversations across hierarchy</td>
  </tr>
  <tr>
    <td rowspan="1"><b>Influencing</b></td>
    <td><i>Communication</i></td>
    <td><input type="radio" name="b" value="1" />Unable to articulate ideas and thoughts</td>
    <td><input type="radio" name="b" value="2" /></td>
    <td><input type="radio" name="b" value="3" />Is able to work in a team environment and support other members</td>
    <td><input type="radio" name="b" value="4" /></td>
    <td><input type="radio" name="b" value="5" />Focuses on achieving group goals and accepts others opinions</td>
  </tr>
</table>

Answer 1

<form onsubmit="if((document.getElementsByName('a').checked) && (document.getElementsByName('b').checked)) {
 //Do whatever needs to be done;
  return true;
  } else { 
    alert('You missed one selection'); 
    return false; 
  }">
                <tr bgcolor="#a9a9a9">
                            <th>Competencies</th>
                            <th>Elements</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                         </tr>
                         <tr> <p id="choices">
                            <td rowspan = "1"><b>Relationship and networking</b></td>
                            <td><i>Building relations and network</i></td>            
                            <td><input type="radio" name="a" value="1"/>Refrains from interacting with other members in the team</td>
                            <td><input type="radio" name="a" value="2"/></td>
                            <td><input type="radio" name="a" value="3"/>Interacts with the team members</td>
                            <td><input type="radio" name="a" value="4"/></td>
                            <td><input type="radio" name="a" value="5"/>Makes efforts to engage in conversations across hierarchy</td>
                         </tr>
                         <tr>
                            <td rowspan = "1"><b>Influencing</b></td>
                            <td><i>Communication</i></td>            
                            <td><input type="radio" name="b" value="1"/>Unable to articulate ideas and thoughts</td>
                            <td><input type="radio" name="b" value="2"/></td>
                            <td><input type="radio" name="b" value="3"/>Is able to work in a team environment and support other members</td>
                            <td><input type="radio" name="b" value="4"/></td>
                            <td><input type="radio" name="b" value="5"/>Focuses on achieving group goals and accepts others opinions</td>
                         </tr>
            <button type="submit">Submit</button>
</form>

Я думаю, что это отвечает на ваш вопрос!

Answer 2

Я добавил кнопку отправки и добавил событие клика. Вот мой jquery код.

<h1 align="center">You are now evaluating AE-SE grade</h1>
<table class="hoverTable" bgcolor="white">
  <colgroup>
    <col style="background-color:#a9a9a9">
  </colgroup>
  <tr bgcolor="#a9a9a9">
    <th>Competencies</th>
    <th>Elements</th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <p id="choices">
      <td rowspan="1"><b>Relationship and networking</b></td>
      <td><i>Building relations and network</i></td>
      <td><input type="radio" name="a" value="1" />Refrains from interacting with other members in the team</td>
      <td><input type="radio" name="a" value="2" /></td>
      <td><input type="radio" name="a" value="3" />Interacts with the team members</td>
      <td><input type="radio" name="a" value="4" /></td>
      <td><input type="radio" name="a" value="5" />Makes efforts to engage in conversations across hierarchy</td>
  </tr>
  <tr>
    <td rowspan="1"><b>Influencing</b></td>
    <td><i>Communication</i></td>
    <td><input type="radio" name="b" value="1" />Unable to articulate ideas and thoughts</td>
    <td><input type="radio" name="b" value="2" /></td>
    <td><input type="radio" name="b" value="3" />Is able to work in a team environment and support other members</td>
    <td><input type="radio" name="b" value="4" /></td>
    <td><input type="radio" name="b" value="5" />Focuses on achieving group goals and accepts others opinions</td>
  </tr>
</table>

<button type="button" class="submit">Submit</button>

body {
  background-color: White;
}

.hoverTable {
  width: 100%;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #4e95f4 1px solid;
}


/* Define the default color for all the table rows */

.hoverTable tr {
  background: ##ffffff;
}


/* Define the hover highlight color for the table row */

.hoverTable tr:hover {
  background-color: #f9d71c;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: center;
}

$(document).ready(function()
                 {
  var radio=$("[type='radio']");
  $(".submit").on("click",function(){
    for(let i=0;i<radio.length;i++)
      {
        let status=$(radio[i]).is(":checked");
        if(status === false)
          {
            alert("Radio button is not checked");
            break;
          }
      }

  })
})

Answer 3

Вы можете вызывать функцию по нажатию кнопки отправки или использовать событие отправки формы для вызова функции, чтобы проверить валидацию переключателя и написать функцию для подтверждения переключателя, как это.

function check_validation(){
  var a = $('input[type="radio"][name="a"]:checked').val();
  var b = $('input[type="radio"][name="b"]:checked').val();

  if(a===undefined){
    alert('a group');
  }
  if(b===undefined){
    alert('b group');
  }

}