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

时间:2015-03-22 14:22:25

标签: jquery html5

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

  1. 如果所有复选框都为null,我有12个具有相同名称的复选框我想要显示警告,如果任何一个字段不为空,那么我想显示no_error

1 个答案:

答案 0 :(得分:0)

您可以选择复选框名称,然后使用.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;
      }



  });
});