如何在 jQuery 中验证数组复选框

Question

如何在Jquery中验证包含数组名称的复选框？

1. 我有 12 个同名复选框，如果所有复选框都为空，我想显示警报，如果任何一个字段不为空，那么我想显示no_error

Answer 1

您可以选择复选框名称，然后使用 .each(( 函数迭代所有具有相同名称的复选框，如下所示：

这里是 html 片段的示例

<input type="checkbox" name="skill_core[]" class="onoffswitch-checkbox" value="1" checked=checked/>
<input type="checkbox" name="skill_core[]" class="onoffswitch-checkbox" value="1"/>

.JS

$(function()
{
  $('input[name^=skill_core]').each(function(i,e){
      if($(this).is(':checked'))
      {
          alert('Checked'); // here you can ignore or doing your stuff if checked
      }
      else
      {
          alert('Nope Checked'); // and here you can make styling for error indicator 
          return false;
      }
  });
});

您可以在提交函数中填充上述代码以进行验证。

验证答案

$(document).ready(function() {

  $("#nextBtn,#opt").click(function(e) {
      e.preventDefault();
      if($('#title').val() == '')
      {
          // alert('Enter title field');
          $('#title').css("border-color","red");
          var msg="Enter the Title Field";
          $('#title').attr("placeholder",msg);
          return false;
      }
      else
      {
        $('#title').css("border-color","");      
      }
      if($('#skill').val() == '')
      {
          $('#skill').css("border-color","red");
          var skillmsg="Enter the Skill Field";
          $('#skill').attr("placeholder",skillmsg);
          return false;
      }
      else
      {
        $('#skill').css("border-color","");
      }
      $('input[name^=skill_core]').each(function(e){
        if(!$(this).is(':checked'))
        {
            alert('Nope Checked');
            return false;
        }
      });
      if($('#location').val() == '')
      {
          $('#location').css("border-color","red");
          var lmsg="Enter the Location Field";
          $('#location').attr("placeholder",lmsg);
          return false;
      }
      else
      {
          $('#location').css("border-color","");
      }
      if(('#rang').val()=="")
      {
          alert('value');
          return false;
      }

  });
});