javascript - 动态增加单选按钮验证

Question

我有一些根据数据动态增加的单选按钮。我想要的是检查是否选择了所有单选按钮。如果不是，我想在该特定行上显示一条错误消息，因为我正在使用表单替换将数据发送到 ajax。

 $(document).ready(function() {
   // radio buttons
   $('#mySpan4').submit(function(e) {
     e.preventDefault();
     $.ajax({
       url: 'ajax2.php',
       data: $(this).serialize(), // reads the data ...
       success: function(data) {
         alert("data Updated Successfully");
         window.location = 'login.html';
       }
     });
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mySpan4">
  <table>
    <tr>
      <td>
        Name : abc
      </td>
      <td>
        <input type="radio" name="game[0]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[0]" value="Father">Father
      </td>
    </tr>
    <tr>
      <td>
        Name : def
      </td>
      <td>
        <input type="radio" name="game[1]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[1]" value="Father">Father
      </td>
    </tr>
    <tr>
      <td>
        Name : ghi
      </td>
      <td>
        <input type="radio" name="game[2]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[2]" value="Father">Father
      </td>
    </tr>
  </table>
  <input name="submit" type="submit" id="submit" value="submit">

</form>

Answer 1

您可以尝试使用 :checked

var all = $('input[type=radio][name^=game]').length;
var chk = $('input[type=radio][name^=game]:checked').length;
var exp = all / 2;// in a group two radios each, any one will be selected
if(chk === exp) {
  //all checked
} else {
  // some goup is not checked
}

$(document).ready(function() {
  // radio buttons
  $('#mySpan4').submit(function(e) {
    e.preventDefault();
    var all = $('input[type=radio][name^=game]').length;
    var chk = $('input[type=radio][name^=game]:checked').length;
    var exp = all / 2; // in a group two radios each, any one will be selected
    if (chk !== exp) {
      alert('Error, select all !');
      return false;
    }
    $.ajax({
      url: 'ajax2.php',
      data: $(this).serialize(), // reads the data ...
      success: function(data) {
        alert("data Updated Successfully");
        window.location = 'login.html';
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mySpan4">
  <table>
    <tr>
      <td>
        Name : abc
      </td>
      <td>
        <input type="radio" name="game[0]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[0]" value="Father">Father
      </td>
    </tr>
    <tr>
      <td>
        Name : def
      </td>
      <td>
        <input type="radio" name="game[1]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[1]" value="Father">Father
      </td>
    </tr>
    <tr>
      <td>
        Name : ghi
      </td>
      <td>
        <input type="radio" name="game[2]" value="Mother">Mother
      </td>
      <td>
        <input type="radio" name="game[2]" value="Father">Father
      </td>
    </tr>
  </table>
  <input name="submit" type="submit" id="submit" value="submit">

</form>