动态增加单选按钮验证

Dynamically increasing radio button validation

本文关键字：验证 单选按钮 增加 动态      更新时间：2023-09-26

我有一些单选按钮，它们会根据数据动态增加。我想要的是检查是否选择了所有单选按钮。如果不是，我想在使用表单替换将数据发送到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>

您可以尝试使用: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>

循环浏览单选按钮并检查是否已检查。

$(input[type="radio"]).each(function(val, i){
   if($(val.is('checked'))){
     //all checked
  }else{
    //Not all checked
  }
})
相关文章：