如果未选中任何单选按钮组，则发出警报

Question

这是我的评估表代码的一部分。我有 10 个单选按钮组。如果用户未选中任何radiobutton 组，我似乎无法编写一段代码来显示alert。 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

您可以在单击提交按钮时调用函数，也可以使用表单提交事件调用函数来检查单选按钮验证并编写一个函数来验证单选按钮。

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');
  }

}

Answer 3

我添加了一个提交按钮并在其上添加了一个点击事件。这是我的 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;
          }
      }

  })
})