Question

我想编写一些常见的jQuery代码来验证表单。这是我的代码：

<html>

<head>
  <title>jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.registerBtn').on({
        click: function(evnt) {

          $('input[type=radio]').each(function() {
            if (!$(this).is(':checked')) {
              var CLASS = $(this).parent().parent().css({
                'background': 'red'
              });
              console.log(CLASS);
            }


          });
          evnt.preventDefault();
          var radioInput = $(".required:checked").val();
          console.log(radioInput);
        }
      });
    });
  </script>

</head>

<body>
  <form action="#">
    <div class="form-group">
      <div class="small">
        <input type="radio" name="sex" value="Male" class="required"> Male
      </div>

      <div class="small">
        <input type="radio" name="sex" value="Female" class="required"> Female
      </div>

    </div>

    <div class="form-group">

      <div class="small">
        <input type="radio" name="abc" value="Male" class="required"> text1
      </div>

      <div class="small">
        <input type="radio" name="abc" value="Female" class="required"> text2
      </div>

    </div>



    <input type="submit" value="Submit" class="registerBtn">
  </form>


</body>

</html>

有两部分无线电输入。如果我选择第一部分的选项并点击提交按钮，则第二部分的背景应为红色。但是两个部分被设置为红色。任何帮助将不胜感激。

Answer 1

我们可以使用jquery 每个来检查每个部门的验证。这是形式组。

更正演示 https://jsfiddle.net/ipsjolly/4boh061y/

<强> HTML

           <form action="#">
                <div class="form-group">
                    <div class="small">
                        <input type="radio" name="sex" value="Male" class="required"> Male
                    </div>
                    <div class="small">
                        <input type="radio" name="sex" value="Female" class="required"> Female
                    </div>
                </div>
                <div class="form-group">
                    <div class="small">
                        <input type="radio" name="abc" value="Male" class="required"> text1
                    </div>
                    <div class="small">
                        <input type="radio" name="abc" value="Female" class="required"> text2
                    </div>
                </div>
                <input type="submit" value="Submit" class="registerBtn">
            </form>

<强> JQuery的

                $(document).ready(function(){
                 $('.registerBtn').on({
                    click: function(evnt){


                        $(".form-group").each(function(){
                            if($(this).find("input:radio:checked").length){
                                $(this).css({'background':'white'});
                                alert($(this).find("input:radio:checked").val());
                            }else{
                                $(this).css({'background':'red'});
                            }

                        }); 
                      evnt.preventDefault();
                    }
               });
            });

Answer 2

我不知道这是否正确，但我认为你正在检查输入类型，对于这两个部分，你有输入类型的收音机，所以我认为你选择使用这样的输入名称检查：

$('input[name=sex]').each(function(){
         if(!$(this).is(':checked')){
           var CLASS = $(this).parent().parent().css({'background':'red'});
           console.log(CLASS);
         }
 $('input[name=abc]').each(function(){
         if(!$(this).is(':checked')){
           var CLASS = $(this).parent().parent().css({'background':'red'});
           console.log(CLASS);

我不知道这是否真的我没有JS的经验

Answer 3

试试这个：

$(document).ready(function() {
      $('.registerBtn').on({
        click: function(evnt) {

          $('.form-group input[type=radio]').each(function() {
            if (!$(this).is(':checked')) {
              var CLASS = $(this).parent().css({
                'background': 'red'
              });
            }
            else
            {
            $(this).parent().css({
                'background': 'white'
              });
            }
          });
          evnt.preventDefault();
          var radioInput = $(".required:checked").val();
        }
      });
    });

<html>

<head>
  <title>jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <form action="#">
    <div class="form-group" >
      <div class="small">
        <input type="radio" name="sex" value="Male" class="required"> Male
      </div>

      <div class="small">
        <input type="radio" name="sex" value="Female" class="required"> Female
      </div>

    </div>

    <div class="form-group">

      <div class="small">
        <input type="radio" name="abc" value="Male" class="required"> text1
      </div>

      <div class="small">
        <input type="radio" name="abc" value="Female" class="required"> text2
      </div>

    </div>



    <input type="submit" value="Submit" class="registerBtn">
  </form>


</body>

</html>

Answer 4

由于您使用的是jQuery，因此无需对每个成员进行迭代

 $('input[type=radio]').each

只需执行查询，jQuery将完成其余的工作，如下所示：

$('input[type=radio]:checked')

一切都是红色的，因为两个组都有相同的名称，它们应该有separete表单名称或使用选择器来选择第一个表单组（不推荐）：

$('div.form-group:first input[type=radio]:checked').parent().css({'background':'red'});

您可以查看完整的解决方案here

Answer 5

试试这段代码

将$(this).parent().parent().css()更改为$('input:radio:checked').parent().parent().css()，以便它可以正常工作

$(document).ready(function() {
  $('.registerBtn').on({
    click: function(evnt) {

      $('input[type=radio]').each(function() {
        if (!$(this).is(':checked')) {
          var CLASS = $('input:radio:checked').parent().parent().css({
            'background': 'red'
          });
          console.log(CLASS);
        }
      });
      evnt.preventDefault();
      var radioInput = $('input:radio:checked').val();
      console.log(radioInput);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="form-group">
    <div class="small">
      <input type="radio" name="sex" value="Male" class="required"> Male
    </div>

    <div class="small">
      <input type="radio" name="sex" value="Female" class="required"> Female
    </div>

  </div>

  <div class="form-group">

    <div class="small">
      <input type="radio" name="abc" value="text1" class="required"> text1
    </div>

    <div class="small">
      <input type="radio" name="abc" value="text2" class="required"> text2
    </div>

  </div>



  <input type="submit" value="Submit" class="registerBtn">
</form>

如何通过多个无线电输入检测是否选择了无线电输入？

5 个答案: